在本快速教程中,您将学习如何在React 16.3 中使用新的Context API。
如何使用React.createContext()
方法创建上下文
例如,使用此方法创建一个上下文:
const aContext = React.createContext('someInitialValue')
Context Consumer
组件接受children prop,它需要是一个函数,它接受提供的值,并返回React元素:
class App extends React.Component {
state = {
message: 'Hi child!'
}
render() {
return (
<aContext.Provider value={this.state.message}>
<!-- Place consumer component-->
</aContext.Provider>)
}
}
现在,如何创建上下文Consumer
组件?只需使用上下文使用者对象包装render prop或高阶组件:
class MiddleComponent extends React.Component {
render() {
return (
<aContext.Consumer>
{ (value) => <div>My parent component says: {value}</div>}
</aContext.Consumer>
)
}
}
按如下方式更改App
组件:
class App extends React.Component {
state = {
message: 'Hi child!'
}
render() {
return (
<aContext.Provider value={this.state.message}>
<MiddleComponent></MiddleComponent>
</aContext.Provider>)
}
}
render(<App />, document.getElementById('root'))