【REACT-组件通信】

父子通信

1. 父=>子

父=>子 REACT-组件属性（props）

2. 子=>父

1. props

import React, { Component} from 'react'
class Child extends Component {
  render() {
    return (
      <div>
        <button onClick={()=>{
          this.props.event('我是子组件传递过来的数据');
        }}>点我</button>
      </div>
    )
  }
}

export default class Father extends Component {
  constructor(){//构造器
  	  //子类必须调用super()
      super();//super 调用了父类（Component）的构造函数来去实例化子类本身,可以向父级传参
      //必须加this

      this.state = {
        value:'默认',
      }
  }
  render() {
    return (
      <div>
        <Child event={this.receiveFromChild}/>
        <span>{this.state.value}</span>
      </div>
    )
  }
  receiveFromChild = value => {
    console.log('子组件传递给父组件的数据',value);
    this.setState({value:value})
  }
}

ReactDOM.render(
  // <React.StrictMode>
    <Father />
  // </React.StrictMode>
  ,document.getElementById('root'))

2. ref

REACT中的ref

非父子组件通信

1. 状态提升(中间人模式)

import React, { Component} from 'react'
class Child1 extends Component {
  render() {
    return (
      <div>
        <button onClick={()=>{
          this.props.event('我是子组件1传递过来的数据');
        }}>子组件1按钮请点我</button>
      </div>
    )
  }
}
class Child2 extends Component {
  render() {
    return (
      <div>
        {`子组件2：${this.props.child1Value}`}
      </div>
    )
  }
}

export default class Father extends Component {
  constructor(){//构造器
  	  //子类必须调用super()
      super();//super 调用了父类（Component）的构造函数来去实例化子类本身,可以向父级传参
      //必须加this

      this.state = {
        value:'默认',
      }
  }
  render() {
    return (
      <div>
        <Child1 event={this.receiveFromChild}/>
        <Child2 child1Value={this.state.value}/>
        <span>{`父组件显示从子组件传递过来的数据：${this.state.value}`}</span>
      </div>
    )
  }
  receiveFromChild = value => {
    console.log('子组件1传递给父组件的数据',value);
    this.setState({value:value})
  }
}


ReactDOM.render(
  // <React.StrictMode>
    <Father />
  // </React.StrictMode>
  ,document.getElementById('root'))

2. 发布订阅模式实现

import React, { Component} from 'react'
let bus={
  list:[],
  //订阅
  subscribe(callback){
    this.list.push(callback);
  },
  //发布
  publish(data){
    //遍历list，执行回调函数
    this.list.forEach(callback => {
      callback&&callback(data);
    });
  }
}

class Child1 extends Component {
  render() {
    return (
      <div>
        <button onClick={()=>{
          //发布
          bus.publish('我是子组件1传递过来的数据');
        }}>子组件1按钮请点我</button>
      </div>
    )
  }
}
class Child2 extends Component {
  constructor(){
    super();
    this.state = {
      value:''
    }
    
  }
  
  componentDidMount(){
    //订阅
    bus.subscribe(value => {
      this.setState({value:value})
    })
  }
  render() {
    
    return (
      <div>
        {`子组件2：${this.state.value}`}
      </div>
    )
  }
}

export default class Father extends Component {
  // constructor(){//构造器
  // 	  //子类必须调用super()
  //     super();//super 调用了父类（Component）的构造函数来去实例化子类本身,可以向父级传参
  //     //必须加this
  // }
  render() {
    return (
      <div>
        <Child1/>
        <Child2/>
      </div>
    )
  }
}

ReactDOM.render(
  // <React.StrictMode>
    <Father />
  // </React.StrictMode>
  ,document.getElementById('root'))

3. context状态树传参

import React, { Component} from 'react'
let GlobalContext = React.createContext();

import React, { Component} from 'react'

let GlobalContext = React.createContext();

class Child1 extends Component {
  render() {
    
    return (
      <GlobalContext.Consumer>
        {/* 建议这种写法，只有一个插槽，所以应return一个整体 */}
        {
          value => {
            return (
              <button onClick={()=>{
                value.setInfo('我是子组件1传递过来的数据')
              }}>子组件1按钮请点我</button>
            )
          }
        }
        {/* <button onClick={()=>{
          value.setInfo('我是子组件1传递过来的数据')
        }}>子组件1按钮请点我</button> */}
      </GlobalContext.Consumer>
      
    )
  }
}

class Child2 extends Component {
  
  render() {
    return (
      <GlobalContext.Consumer>
        {
          a => {
            return  <div>{`子组件2：${a.info}`}</div>
          }
        }
      </GlobalContext.Consumer>
    )
  }
}

export default class Father extends Component {
  state = {
    info:''
  }
  render() {
    return (
      <GlobalContext.Provider value={
        {
          info:this.state.info,
          setInfo:(value)=>{
            this.setState({info:value})
          }
        }
      }>
        <Child1/>
        <Child2/>
      
      </GlobalContext.Provider>
    )
  }
}

ReactDOM.render(
  // <React.StrictMode>
    <Father />
  // </React.StrictMode>
  ,document.getElementById('root'))

插槽

REACT-插槽