【React】7.组件间的通讯

组件之间经常需要共享数据，传递数据，互相调用方法等操作。这时就需要使用组件间通讯的技术。包括父子组件通讯，兄弟组件通讯。

1. 父组件向子组件传递参数

这个很简单，分两步：

1. 父组件使用标签调用子组件时传入参数；
2. 子组件使用props获取传过来的参数。

import React from 'react'
import ReactDOM from 'react-dom/client'

//父组件
class Parent extends React.Component {

  render() {
    return (
      <div>
        父组件
        <Child name="tom" />
      </div>
    )
  }


}

//子组件
class Child extends React.Component {

  render() {
    return (
      <div>child recieved :{this.props.name}</div>
    )
  }

}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<Parent />)

2. 子组件向父组件传递参数

步骤：

1. 父组件定义一个回调函数；
2. 父组件调用子组件，并传入回调函数；
3. 子组件收到回调函数，调用回调函数，将信息传给父组件；

import React from 'react'
import ReactDOM from 'react-dom/client'

//父组件
class Parent extends React.Component {
  state = {
    msg: null
  }

  //1.定义一个回调函数
  sendMsg = (msg) => {
    this.setState({ msg: msg })
  }

  render() {
    return (
      <div>
        父组件收到信息：{this.state.msg}
        <br />
        {/* 2.父组件将回调函数发送给子组件 */}
        <Child callback={this.sendMsg} />
      </div>
    )
  }


}

//子组件
//class Child extends Parent {
class Child extends React.Component {

  //5.事件函数，使用父组件传递过来的回调函数，并传入信息
  clickHandler = () => {
    this.props.callback(new Date().toLocaleTimeString())
  }

  render() {
    return (
      //3.子组件调用自己的事件函数
      <button onClick={this.clickHandler}>子组件向父组件发送时间</button>
    )
  }

}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<Parent />)

3. 兄弟组件传递参数

使用一个公共父组件的state来作为兄弟组件的共享变量，实现传递。

import React from 'react'
import ReactDOM from 'react-dom/client'

//父组件
class Parent extends React.Component {
  //初始化状态
  state = {
    count: 0
  }

  //提供一个状态改变回调函数
  onIncrement = () => {
    this.setState({ count: this.state.count + 1 })
  }


  render() {

    return (
      <div>
        {/* 调用子组件1 */}
        <Child1 count={this.state.count} />
        {/* 调用子组件2 */}
        <Child2 onIncrement={this.onIncrement} />
      </div>
    )
  }

}


//子组件1
const Child1 = (props) => {

  return (
    //使用父组件传来的值
    <div>计数器：{props.count}</div>
  )

}
//子组件2
const Child2 = (props) => {

  return (
    //调用父组件的回调函数
    <button onClick={() => props.onIncrement()} >+1</button>
  )

}
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<Parent />)

4. 跨组件通讯

组件1调用组件2，组件2调用组件3;
想从组件1传信息给组件3，要是经过组件2中转会很麻烦。

所以，可以用context来实现：

import React from 'react'
import ReactDOM from 'react-dom/client'

//创建Context，里面名字时固定的
const { Provider, Consumer } = React.createContext();

//组件1
class Parent extends React.Component {


  render() {
    return (
      // 使用Provider传入值，任意类型的值
      // <Provider value="tom">
      <Provider value={{ name: "tom", age: 11 }}>
        <Node1 />
      </Provider>

    )
  }


}


//组件2
const Node1 = () => {
  return (
    <Node2 />
  )

}

//组件3
const Node2 = () => {

  return (
    //Consumer使用值
    <Consumer>
      {
        data => <div>node2:{data.name},{data.age}</div>
      }
    </Consumer>

  )

}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<Parent />)