非父子组件传值
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>
<script type="text/babel">
const context=React.createContext()
class A