跳到主要内容

第10章：组件通信

简要说明​

组件通信是React开发中的核心概念之一。通过组件之间的数据传递与交互，可以实现复杂的动态功能。本章将重点讲解三种常见的组件通信方式：父组件向子组件传递数据、子组件向父组件传递数据，以及兄弟组件之间的通信。

1. 父组件向子组件传递数据（Props）​

在React中，父组件可以通过props向子组件传递数据。这是一种单向数据流的机制，确保数据从父组件流向子组件。

示例：父组件传递数据给子组件​

父组件代码：

function ParentComponent() {
  const greet = "Hello, React!";
  
  return (
    <div>
      <h2>父组件</h2>
      <ChildComponent greeting={greet} />
    </div>
  );
}

子组件代码：

function ChildComponent(props) {
  return (
    <div>
      <h3>子组件</h3>
      <p>{props.greeting}</p>
    </div>
  );
}

运行结果：

父组件
子组件
Hello, React!

说明：

  • 父组件定义了一个变量greet，并通过greeting的键传递给子组件。
  • 子组件通过props.greeting接收并显示数据。
  • 这种方式适用于父组件需要将数据传递给子组件的场景。

2. 子组件向父组件传递数据（回调函数）​

子组件无法直接修改父组件的状态，但可以通过调用父组件传递的回调函数来实现数据的反向传递。

示例：子组件调用父组件的回调函数​

父组件代码：

function ParentComponent() {
  const handleButtonClick = (message) => {
    alert(`从子组件传递的消息：${message}`);
  };

  return (
    <div>
      <h2>父组件</h2>
      <ChildComponent onButtonClick={handleButtonClick} />
    </div>
  );
}

子组件代码：

function ChildComponent(props) {
  return (
    <div>
      <h3>子组件</h3>
      <button onClick={() => props.onButtonClick("Hello from child!")}>
        触发父组件的回调
      </button>
    </div>
  );
}

运行结果：

  • 点击按钮后弹出消息："从子组件传递的消息：Hello from child!"

说明：

  • 父组件定义了一个handleButtonClick函数，并将该函数传递给子组件。
  • 子组件通过调用props.onButtonClick触发父组件的函数，并传递数据。
  • 这种方式适用于子组件需要向父组件反馈数据的场景。

3. 兄弟组件之间的通信​

兄弟组件之间没有直接的父子关系，无法通过props或回调函数直接通信。解决的办法通常是将共享的数据提升到它们共同的父组件中。

示例：兄弟组件之间的通信​

共享状态的父组件：

function ParentComponent() {
  const [message, setMessage] = useState("初始消息");

  return (
    <div>
      <h2>父组件</h2>
      <Sibling1 setMessage={setMessage} />
      <Sibling2 message={message} />
    </div>
  );
}

兄弟组件1代码：

function Sibling1({ setMessage }) {
  return (
    <div>
      <h3>兄弟组件1</h3>
      <input
        type="text"
        placeholder="输入消息"
        onChange={(e) => setMessage(e.target.value)}
      />
    </div>
  );
}

兄弟组件2代码：

function Sibling2({ message }) {
  return (
    <div>
      <h3>兄弟组件2</h3>
      <p>兄弟组件1传递的消息：{message}</p>
    </div>
  );
}

运行结果：

  • 兄弟组件1中输入内容后，兄弟组件2会显示相同的输入内容。

说明：

  • 共享的状态message存储在父组件中。
  • 兄弟组件1通过父组件传递的setMessage函数修改状态。
  • 兄弟组件2通过父组件传递的message属性接收数据。
  • 这种方式适用于兄弟组件之间需要共享数据的场景。

总结​

本章讲解了React中三种常见的组件通信方式：

  1. 父组件向子组件传递数据：使用props实现单向数据传递。
  2. 子组件向父组件传递数据：通过回调函数实现反向通信。
  3. 兄弟组件之间的通信：通过共同的父组件管理共享状态。

掌握这些通信方式是构建复杂组件化应用的基础。下一章我们将深入探讨React的状态管理（State）机制，为更复杂的场景做好准备。