文章
问答
冒泡
React中context实现多层组件传参
1.调用React.createContext()创建Provider(提供数据)和Consumer(消费数据)两个组件
      const { Provider, Consumer }  = React.createContext()
2.使用Provider组件作为父节点
        <Provider>
            <div className="APP">
                <Child />
            </div>
        <Provider>
3.设置value值,表示要传递的数据
        <Provider value={ true }>
4.调用Consumer组件接收数据
        <Consumer>
            {data => <span>data参数表示接收到的数据:{ data }</span>}
        <Consumer> 
总结:
    1. 如果两个组件是远方亲戚(比如:嵌套多层)可以使用Context实现组件通讯
    2. Context提供两个组件:Provider和Consumer
    3. Provider:用来提供数据 
    4. Consumer:用来消费数据
react

关于作者

小乙哥
学海无涯,回头是岸
获得点赞
文章被阅读