React中兄弟组件通信和组件跨级传递Context的使用

React兄弟组件之间的通信

Child2组件需要去更改Child1组件中的数据。
因为Child1和Child2是兄弟组件
所以数据和事件都放在最进的父级组件中去

兄弟组件通信的简单使用

import React from 'react'; //这个是react这个包，我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom

class PartentHello extends React.Component {
  state = {
    num:10
  }

  // Child2中的组件事件的回调更改Child1中的数据
  addHandler = () => { 
    this.setState({
      num: this.state.num+10
    })
  }

  render() { 
    return (
      <div>
        <Child1 num={ this.state.num}></Child1>
        <Child2 addAdd={ this.addHandler}></Child2>
      </div>
    )
  }
}

// 组件 Child1
const Child1 = props => {
  return (
    <h1>数量{props.num }</h1>
  )
}

// 组件 Child2
const Child2 = props => {
  return (
    <button onClick={()=>props.addAdd()}>增加</button>
  )
}

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

兄弟组件

将共享状态提升到最近的公共父组件中。
由公共父组件来管理这个状态（数据，事件）
它的思想就是状态提升

组件跨级传递 Context

当Child1组件中有Child2组件。
Child2组件中有Child3组件。
Child3中有Child4组件
我们怎么将Child1中的数据传递给Child4呢？？？

这个时候，我们就可以使用 Context.
他主要运用在数据跨组件传递。
如：背景颜色。 语言等

使用Context

import React from 'react'; //这个是react这个包，我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
import './index.css'
// Provider是提供者， Consumer接受者
const { Provider, Consumer } = React.createContext()

class PartentHello extends React.Component {
  render() { 
    return (
      <Provider value='传递的数据'>
        <div className='box'>
          <Child1></Child1>
        </div>
      </Provider>
    )
  }
}

// 组件 Child1
const Child1 = () => {
  return (
    <div className='Child1'>
      <h1> 我是Child1组件 </h1>
      <Child2></Child2>
    </div>
  )
}

// 组件 Child2
const Child2 = () => {
  return (
   <div className='Child2'>
      <h1> 我是Child2组件 </h1>
      <Child3></Child3>
    </div>
  )
}

// 组件 Child3
const Child3 = () => {
  return (
   <div className='Child3'>
      <h1> 我是Child3组件 </h1>
      <Consumer>
        {/* 千万要注意 Consumer不能有其他内容，否者会报错 */}
        {data => <span>{data}</span>}
      </Consumer>
    </div>
  )
}

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

总结 Context

使用Context的时候，他提供了两个组件。
分别是 Provider, Consumer。
Provider组件是提供数据的。Consumer是接受数据的。
Provider是使用value进行传递。
Consumer通过下面这样的方法进行接收数据
<Consumer>
  {data => <span>{data}</span>}
</Consumer>

遇见问题，这是你成长的机会，如果你能够解决，这就是收获。