React 中父子组件如何通信？

推荐答案

在 React 中，父子组件之间的通信主要通过以下两种方式实现：

1. 父组件向子组件传递数据：父组件通过 props 将数据传递给子组件。
2. 子组件向父组件传递数据：父组件通过 props 将一个回调函数传递给子组件，子组件调用该回调函数并将数据作为参数传递回父组件。

示例代码

// www.javascriptcn.com code example
// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [message, setMessage] = useState('Hello from Parent');

  const handleChildMessage = (childMessage) => {
    setMessage(childMessage);
  };

  return (
    <div>
      <h1>{message}</h1>
      <ChildComponent onMessage={handleChildMessage} />
    </div>
  );
}

export default ParentComponent;

// 子组件
import React from 'react';

function ChildComponent({ onMessage }) {
  const sendMessageToParent = () => {
    onMessage('Hello from Child');
  };

  return (
    <div>
      <button onClick={sendMessageToParent}>Send Message to Parent</button>
    </div>
  );
}

export default ChildComponent;

本题详细解读

父组件向子组件传递数据

在 React 中，父组件可以通过 props 将数据传递给子组件。子组件通过 props 接收父组件传递的数据，并在组件内部使用这些数据。

• 优点：简单直接，适用于单向数据流。
• 缺点：如果数据层级较深，可能会导致 props 传递过多，代码冗余。

子组件向父组件传递数据

子组件可以通过调用父组件传递的回调函数，将数据传递回父组件。父组件在回调函数中处理子组件传递的数据。

• 优点：灵活，适用于需要子组件向父组件传递数据的场景。
• 缺点：需要定义回调函数，可能会增加代码复杂度。

使用场景

• 父组件向子组件传递数据：适用于展示型组件，子组件仅负责展示父组件传递的数据。
• 子组件向父组件传递数据：适用于交互型组件，子组件需要将用户输入或操作结果传递给父组件进行处理。

注意事项

• 单向数据流：React 推崇单向数据流，数据从父组件流向子组件，子组件通过回调函数将数据传递回父组件。
• 避免过度使用回调：如果回调函数过多，可能会导致代码难以维护，建议合理设计组件结构，避免过度依赖回调函数。