React中App 组件要传递数据给Child 组件，该如何处理？

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。(摘自官网zh-hans.reactjs.org/docs/contex…)

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

简单小demo使用步骤：

1. 调用 React. createContext() 创建 Provider（提供数据） 和 Consumer（消费数据） 两个组件。

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

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

 <Provider >
        <div className='app'>
          <Node />
        </div>
 </Provider>

3. 设置 value 属性，表示要传递的数据。

 <Provider value="blue">
      ...
  </Provider>

4. 调用 Consumer 组件接收数据

 <div className='child'>
      <Consumer>
        {
          data => <span>我是子节点11{data}</span>
        }
      </Consumer>
    </div>

完整代码:

/**
 * Context 跨组件实现通信
 */
import React, { Component } from 'react'
const { Provider, Consumer } = React.createContext();
export default class App extends Component {
  render() {
    return (
      <Provider value="blue">
        <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>我是子节点11{data}</span>
        }
      </Consumer>
    </div>
  )
}

总结:

0. 如果两个组件是远方亲戚（例如，嵌套多层）可以使用Context实现组件通讯
1. Context提供了两个组件：Provider 和 Consumer
2. 使用 context, 我们可以避免通过中间元素传递 props：
3. Provider组件：用来提供数据
4. Consumer组件：用来消费数据