React第八天（非父子传值）

1、非父子组件传值用可的方法

例子1

例如：
组件b想要向组件c传值 组件b和组件c拥有共同的父组件app
方法：
我们可以使用首先将组件b中数据传递给 app 然后再将app里边的数据传递给c组件
—当然后期我们还有其他方法—目前这是我们所学习中使用的方法



以上是我们遇到的非父子通信的简单的一种形式

例子2

组件a 有个子组件b 组件b有一个子组件c 实现a数据传递给c组件
直接实现组件a向组件c传值 跳过组件b 而不使用props一层一层传递
这个时候我们需要使用context(上下文)
使用context上下文前提:
context数据自上而下一种形式 反之就不行

context实现步骤

1 首先声明一下context
const context=React.createContext()

2 在需要发送数据的组件上写上 context.Provider 发送数据

<context.Provider> <组件标签 value={要发送的数据}/> </context.Provider>

3 在需要接受数据的组件上边 写上context.Consumer 来接受数据
<context.Consumer> {value => /* 基于 context 值进行渲染*/} </context.Consumer>