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