\n\nNote:
\nThe legacy context API will be removed in a future major version.\nUse the new context API introduced with version 16.3.\nThe legacy API will continue working for all 16.x releases.
\n
\n\nThis section documents a legacy API. See the new API.
\n
Suppose you have a structure like:
\nclass Button extends React.Component {\n render() {\n return (\n <button style={{background: this.props.color}}>\n {this.props.children}\n </button>\n );\n }\n}\n\nclass Message extends React.Component {\n render() {\n return (\n <div>\n {this.props.text} <Button color={this.props.color}>Delete</Button>\n </div>\n );\n }\n}\n\nclass MessageList extends React.Component {\n render() {\n const color = \"purple\";\n const children = this.props.messages.map((message) =>\n <Message text={message.text} color={color} />\n );\n return <div>{children}</div>;\n }\n}In this example, we manually thread through a color prop in order to style the Button and Message components appropriately. Using context, we can pass this through the tree automatically:
import PropTypes from 'prop-types';\n\nclass Button extends React.Component {\n render() {\n return (\n <button style={{background: this.context.color}}> {this.props.children}\n </button>\n );\n }\n}\n\nButton.contextTypes = { color: PropTypes.string};\nclass Message extends React.Component {\n render() {\n return (\n <div>\n {this.props.text} <Button>Delete</Button> </div>\n );\n }\n}\n\nclass MessageList extends React.Component {\n getChildContext() { return {color: \"purple\"}; }\n render() {\n const children = this.props.messages.map((message) =>\n <Message text={message.text} />\n );\n return <div>{children}</div>;\n }\n}\n\nMessageList.childContextTypes = { color: PropTypes.string};By adding childContextTypes and getChildContext to MessageList (the context provider), React passes the information down automatically and any component in the subtree (in this case, Button) can access it by defining contextTypes.
If contextTypes is not defined, then context will be an empty object.
\n\nNote:
\n\n
React.PropTypeshas moved into a different package since React v15.5. Please use theprop-typeslibrary instead to definecontextTypes.We provide a codemod script to automate the conversion.
\n
\n\nThis section documents a legacy API. See the new API.
\n
Context can also let you build an API where parents and children communicate. For example, one library that works this way is React Router V4:
\nimport { BrowserRouter as Router, Route, Link } from 'react-router-dom';\n\nconst BasicExample = () => (\n <Router>\n <div>\n <ul>\n <li><Link to=\"/\">Home</Link></li>\n <li><Link to=\"/about\">About</Link></li>\n <li><Link to=\"/topics\">Topics</Link></li>\n </ul>\n\n <hr />\n\n <Route exact path=\"/\" component={Home} />\n <Route path=\"/about\" component={About} />\n <Route path=\"/topics\" component={Topics} />\n </div>\n </Router>\n);By passing down some information from the Router component, each Link and Route can communicate back to the containing Router.
Before you build components with an API similar to this, consider if there are cleaner alternatives. For example, you can pass entire React components as props if you’d like to.
\n\n\nThis section documents a legacy API. See the new API.
\n
If contextTypes is defined within a component, the following lifecycle methods will receive an additional parameter, the context object:
constructor(props, context)componentWillReceiveProps(nextProps, nextContext)shouldComponentUpdate(nextProps, nextState, nextContext)componentWillUpdate(nextProps, nextState, nextContext)\n\nNote:
\nAs of React 16,
\ncomponentDidUpdateno longer receivesprevContext.
\n\nThis section documents a legacy API. See the new API.
\n
Function components are also able to reference context if contextTypes is defined as a property of the function. The following code shows a Button component written as a function component.
import PropTypes from 'prop-types';\n\nconst Button = ({children}, context) =>\n <button style={{background: context.color}}>\n {children}\n </button>;\n\nButton.contextTypes = {color: PropTypes.string};\n\nThis section documents a legacy API. See the new API.
\n
Don’t do it.
\nReact has an API to update context, but it is fundamentally broken and you should not use it.
\nThe getChildContext function will be called when the state or props changes. In order to update data in the context, trigger a local state update with this.setState. This will trigger a new context and changes will be received by the children.
import PropTypes from 'prop-types';\n\nclass MediaQuery extends React.Component {\n constructor(props) {\n super(props);\n this.state = {type:'desktop'};\n }\n\n getChildContext() {\n return {type: this.state.type};\n }\n\n componentDidMount() {\n const checkMediaQuery = () => {\n const type = window.matchMedia(\"(min-width: 1025px)\").matches ? 'desktop' : 'mobile';\n if (type !== this.state.type) {\n this.setState({type});\n }\n };\n\n window.addEventListener('resize', checkMediaQuery);\n checkMediaQuery();\n }\n\n render() {\n return this.props.children;\n }\n}\n\nMediaQuery.childContextTypes = {\n type: PropTypes.string\n};The problem is, if a context value provided by component changes, descendants that use that value won’t update if an intermediate parent returns false from shouldComponentUpdate. This is totally out of control of the components using context, so there’s basically no way to reliably update the context. This blog post has a good explanation of why this is a problem and how you might get around it.