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>