父子组件通讯的设计与实现

前端

2023-11-12 21:07:15

前言

在react开发中，组件通讯是必不可少的。组件通讯的方式有很多种， props属性是最直接方便的一种。父组件向子组件通讯时，可以通过props属性传递数据。子组件向父组件通讯时，可以通过事件触发父组件的方法。

父子组件通讯

1. props属性

props属性是react组件之间通讯最直接的方式。父组件可以通过props属性传递数据给子组件，子组件可以通过props属性接收数据。props属性是只读的，子组件不能直接修改props属性的值。

2. 事件

事件是react组件之间通讯的另一种方式。父组件可以通过事件触发子组件的方法，子组件可以通过事件触发父组件的方法。事件是异步的，这意味着当一个事件被触发时，它不会立即执行。

3. context

context是react组件之间通讯的第三种方式。context是全局的，这意味着它可以在任何组件中访问。context可以通过Provider组件和Consumer组件来使用。Provider组件提供context的值，Consumer组件消费context的值。

demo演示

1. 父组件向子组件通讯

// 父组件
class Parent extends React.Component {
  state = {
    name: '张三'
  }

  render() {
    return (
      <div>
        <h1>父组件</h1>
        <Child name={this.state.name} />
      </div>
    )
  }
}

// 子组件
class Child extends React.Component {
  render() {
    return (
      <div>
        <h1>子组件</h1>
        <p>姓名：{this.props.name}</p>
      </div>
    )
  }
}

在这个demo中，父组件通过props属性向子组件传递数据。子组件通过props属性接收数据。

2. 子组件向父组件通讯

// 父组件
class Parent extends React.Component {
  state = {
    count: 0
  }

  handleIncrement = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  render() {
    return (
      <div>
        <h1>父组件</h1>
        <p>计数：{this.state.count}</p>
        <Child onIncrement={this.handleIncrement} />
      </div>
    )
  }
}

// 子组件
class Child extends React.Component {
  render() {
    return (
      <div>
        <h1>子组件</h1>
        <button onClick={this.props.onIncrement}>+</button>
      </div>
    )
  }
}