React组件通讯，这些手段你知道吗？

React 组件之间的通讯，有多种手段！#

React 组件之间需要进行通信才能协同工作。有许多方法可以实现组件之间的通信，包括：

• 父组件向子组件传递数据
• 子组件向父组件传递数据
• 兄弟组件之间的通信
• 非兄弟组件之间的通信

在本文中，我们将探讨这些不同的通信方式，并提供一些示例来说明如何使用它们。

父组件向子组件传递数据

父组件向子组件传递数据是使用 props 对象完成的。props 对象是一个只读对象，它包含了父组件想要传递给子组件的数据。要将数据传递给子组件，父组件需要在渲染子组件时将数据作为属性传递给子组件。

class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        <ChildComponent data={this.state.data} />
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        {this.props.data}
      </div>
    );
  }
}

在上面的示例中，ParentComponent 将 data 属性传递给 ChildComponent。ChildComponent 然后可以访问该属性并将其渲染到组件中。

子组件向父组件传递数据

子组件向父组件传递数据可以使用事件来完成。当子组件发生事件时，它可以将事件传递给父组件。父组件然后可以处理该事件并做出相应的反应。

class ChildComponent extends React.Component {
  handleClick() {
    this.props.onClick();
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

class ParentComponent extends React.Component {
  handleClick() {
    console.log('Child component clicked');
  }

  render() {
    return (
      <div>
        <ChildComponent onClick={this.handleClick} />
      </div>
    );
  }
}

在上面的示例中，ChildComponent 在按钮被点击时调用 handleClick() 方法。该方法触发 onClick 事件，该事件被传递给父组件。父组件然后处理该事件并输出 "Child component clicked"。

兄弟组件之间的通信

兄弟组件之间的通信可以使用事件或状态管理库来完成。事件允许兄弟组件相互发送消息，而状态管理库允许兄弟组件共享数据。

// 事件
class SiblingComponent1 extends React.Component {
  handleClick() {
    this.props.onClick();
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

class SiblingComponent2 extends React.Component {
  handleClick() {
    console.log('Sibling component 1 clicked');
  }

  render() {
    return (
      <div>
        <SiblingComponent1 onClick={this.handleClick} />
      </div>
    );
  }
}

// 状态管理库
class SiblingComponent1 extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.incrementCounter}>Increment counter</button>
      </div>
    );
  }
}

class SiblingComponent2 extends React.Component {
  render() {
    return (
      <div>
        <p>Counter: {this.props.counter}</p>
      </div>
    );
  }
}

class ParentComponent extends React.Component {
  state = {
    counter: 0
  };

  incrementCounter = () => {
    this.setState({
      counter: this.state.counter + 1
    });
  };

  render() {
    return (
      <div>
        <SiblingComponent1 incrementCounter={this.incrementCounter} />
        <SiblingComponent2 counter={this.state.counter} />
      </div>
    );
  }
}

在上面的示例中，SiblingComponent1 和 SiblingComponent2 是兄弟组件。它们通过事件或状态管理库进行通信。在第一个示例中，SiblingComponent1 在按钮被点击时调用 handleClick() 方法。该方法触发 onClick 事件，该事件被传递给 SiblingComponent2。SiblingComponent2 然后处理该事件并输出 "Sibling component 1 clicked"。在第二个示例中，SiblingComponent1 和 SiblingComponent2 都通过 ParentComponent 进行通信。ParentComponent 维护一个计数器状态，SiblingComponent1 可以通过调用 incrementCounter() 方法来增加计数器，SiblingComponent2 可以通过读取 counter 属性来显示计数器。

非兄弟组件之间的通信

非兄弟组件之间的通信可以使用事件、状态管理库或路由来完成。事件允许非兄弟组件相互发送消息，而状态管理库允许非兄弟组件共享数据。路由允许非兄弟组件在应用程序的不同页面之间通信。

// 事件
class Component1 extends React.Component {
  handleClick() {
    this.props.onClick();
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

class Component2 extends React.Component {
  handleClick() {
    console.log('Component 1 clicked');
  }

  render() {
    return (
      <div>
        <Component1 onClick={this.handleClick} />
      </div>
    );
  }
}

// 状态管理库
class Component1 extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.incrementCounter}>Increment counter</button>
      </div>
    );
  }
}

class Component2 extends React.Component {
  render() {
    return (
      <div>
        <p>Counter: {this.props.counter}</p>
      </div>
    );
  }
}

class ParentComponent extends React.Component {
  state = {
    counter: 0
  };

  incrementCounter = () => {
    this.setState({
      counter: this.state.counter + 1
    });
  };

  render() {
    return (
      <div>
        <Component1 incrementCounter={this.incrementCounter} />
        <Component2 counter={this.state.counter} />
      </div>
    );
  }
}

// 路由
class Component1 extends React.Component {
  handleClick() {
    this.props.history.push('/component2');
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Go to component 2</button>
      </div>