react兄弟组件之间通信（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>