06.React组件进阶(二）Context

Posted 2021-03-13 foreverluckystar

Context

作用：跨组件传递数据（比如主题，语言等）

使用步骤：

1.使用Reat.creatContext()创建Provider(提供数据和 Consumer(消费数据) 两个组件

const {Provider,Consumer} = React.createContext()

2.使用Provider组件作为父节点

<Provider>
    <div className="App">
        <Child1 />
    </div>
</Provider>

3.使用value属性，表示要传递的数据

<Provider value="pink">

4.使用Consumer 组件接收数据

<Consumer>
    {data => <span>data参数表示接收到的数据---data</span>}
</Cpnsumer>

//2.接收数据 
//创建Context得到两个组件
const {Provider,Consumer} = React.createContext()
//父组件
class App extends React.Component{
    render(){
        return(
            <Provider value="pink">
                <div className="app">
                  <Node/>
                 </div>
            </Provider>
        )
    }
}
//子组件
const Node = props => {
    return (
        <div className="node">
            <SubNode/>
        </div>
    )
}

const SubNode = props =>{
    return (
        <div className="subNode">
            <Child/>
        </div>
    )
}

const Child = props =>{
    return (
        <div className="child">
            <Consumer>
    {data =><span>我是子节点--{data}</span>}
            </Consumer>
        </div>
    )
}
//1.传递数据
ReactDOM.render(<App/>,document.getElementById('root'))

总结

1.如果两个组件是远方亲戚（比如，嵌套多层）可以使用Context实现组件通讯
2.Context提供了两个组件：Provider 和 Consumer
3.Provider组件:用来提供数据
4.Consumer组件:用来消费数据