react的父子通信、子父通信、兄弟通信

// 父传子
class Parent extends React.Component{
state={
  name:"zx"
}
render(){
  return (
    <div className='parent'>
      父组件：
    <Child name={this.state.name}></Child>
    </div>
  )
}
}
const Child=(props)=>{
  console.log("zx",props);  
  return (
    <div className='child'>

      <p>子组件 ，接受父组件{props.name}</p>
      </div>
  )
}
ReactDOM.render(<Parent name="zx" age={19} list="['123','456']"></Parent>, document.getElementById('root'))


// // 子传父
class Parent extends React.Component {
  state={
    ds:''
  }
  // 回调函数接受数据
  getChildMsg=data=>{
    console.log(data);
    this.setState({
      ds:data
    })
  }
  render() {
    return (
      <div className='parent'>
        父组件：{this.state.ds}
        <Child getmsg={this.getChildMsg}></Child>
      </div>
    )
  }
}
class Child extends React.Component{
  state={
    ds:"123123123"
  }
  handleClick=()=>{
    this.props.getmsg(this.state.ds)
  }
  render(){
    return(
      <div className='child'>
        子组件
        <button onClick={this.handleClick}>点我，给父组件传数据</button>
        </div>
    )
  }
}
ReactDOM.render(<Parent name="zx" age={19} list="['123','456']"></Parent>, document.getElementById('root'))



// 兄弟通信

class Counter extends React.Component {
  // 提供共享状态
  state={
    count:0
  }
  // 提供修改状态的方法
  onIncrement=()=>{
    this.setState({
      count:this.state.count+1
    })
  }
  render() {
    return (
      <div>
        <Child1 count={this.state.count}></Child1>
        <Child2 onIncrement={this.onIncrement}></Child2>
      </div>
    );
  }
}
const Child1=(props)=>{
    return <h1>计算器:{props.count}</h1>
}
const Child2=(props)=>{

    return <button onClick={()=>{props.onIncrement()}}>+1</button>
}
ReactDOM.render(<Counter></Counter>,document.getElementById("root"))

跨越通信

设置value属性，表示要传递的数据
1、如果两个组件是远方亲戚，可以使用Context实现组通讯
2、Context提供两个组件：Provider和Consumer
3、Provider组件：用来提供数据
4、Consumer组件：用来消费数据

const {Provider,Consumer}=React.createContext()
// 设置value属性，表示要传递的数据
// 1、如果两个组件是远方亲戚，可以使用Context实现组通讯
// 2、Context提供两个组件：Provider和Consumer
// 3、Provider组件：用来提供数据
// 4、Consumer组件：用来消费数据

class App extends React.Component {

  render() {
    return (
      <Provider value="pink">
      <div className='app'>
        <Node></Node>
      </div>
      </Provider>
    );
  }
}

const Node = props => {
  return (
    <div className='node'>
      <SubNode></SubNode>
    </div>
  )
}

const SubNode = props => {
  return (
    <div className='subnode'>
      <Child></Child>
    </div>
  )
}

const Child = props => {
  return (
    <div className='child'>我是子节点
    <Consumer>{data=><sapn>-----我是传过来的数据:{data}</sapn>}</Consumer>
    
    </div>
  )
}
ReactDOM.render(<App></App>,document.getElementById("root"))