React 16.3新上下文API教程

分享于 

2分钟阅读

ReactNative

  繁體

在本快速教程中,您将学习如何在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'))


API  react  教程  Context