react多组件通讯

不管是包裹还是写 contextType = myCtx的方法都要在const { Provider, Consumer } = myCtx包裹的情况下,父组件必须在包裹的情况下才能直接获取到props数据

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

//将React.createContext()方法拿到
const myCtx = React.createContext()
//只要将Provider包在父组件捡Consumer 包在子组件就能直接props数据
const { Provider, Consumer } = myCtx

class App extends React.Component {
  state = {
    color: 'red',
    fontSize: 16
  }
  
  render() {
    return (
      <Provider value={{
        color: this.state.color,
        fontSize: this.state.fontSize
      }} >
        <div>
          <h1>App</h1>
          <button onClick={
            () => {
              this.setState({
                color: 'green',
                fontSize: 34
              })
            }
          }>修改颜色为绿色</button>
          <hr />
          <One></One>
        </div>
      </Provider>
    )
  }
}

class One extends React.Component {
  render() {
    return (
      <div>
        <h2>One</h2>
        <hr />
        <Two></Two>
      </div>
    )
  }
}

class Two extends React.Component {
//子组件只要拿到就能接受到props数据
  static contextType = myCtx

  render() {
    console.log('========')
    console.log(this.context)
    return (
      <div>
        <h3 style={{ color: this.context.color }}>Two</h3>
        <hr />
        <Three></Three>
      </div>
    )
  }
}
// 或者这样写也可以
// Two.contextType = myCtx

class Three extends React.Component {
  render() {
    return (
      <Consumer>
        {
          (data) => {

            return (
              <div>
                <h4 style={{ color: data.color, fontSize: data.fontSize + 'px' }}>Three</h4>
              </div>
            )
          }
        }
      </Consumer>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))