react利用context传值

import React from 'react';
import ReactDOM from 'react-dom';

// 先创建Provider, Consumer
const { Provider, Consumer } = React.createContext()

class Parent extends React.Component {
  state = {
    value: '11111'
  }
  // 父组件引入两个子组件
  render() {
    return (
      <div className='parent'>
        {/* 在父组件最外层包一层provider */}
        <Provider value={this.state.value}>
          <Children1 />
        </Provider>
      </div>
    )
  }
}

class Children1 extends React.Component {
  render() {
    return (
      <div>
        <Children2 />
      </div>
    )
  }
}

class Children2 extends React.Component {

  render() {
    return (
      <div>
        {/* 要接收的子组件 */}
        <Consumer>
          {data => <div>我是子组件2---{data}</div>}
        </Consumer>
      </div>
    )
  }
}
ReactDOM.render(<Parent />, document.getElementById('root'))