# 父子组件通信（props 回调）

URL: https://caijiao.org/react/chapter7/parent-child
Source: docs/react/chapter7/parent-child.md
Description: 父子组件通信是 React 中非常常见的需求，可以通过 props 传递数据或使用回调函数进行交互。父组件通过 props 向子组件传递数据，子组件通过回调函数将数据传递回父组件。

## 父组件传递数据给子组件

在 React 中，父组件通过 `props` 向子组件传递数据。子组件可以通过 `props` 接收并渲染数据。

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

  return (
    <div>
      <h1>{message}</h1>
      
    </div>
  );
}

function Child({ message }) {
  return <p>{message}</p>;
}
````

在上面的例子中，父组件 `Parent` 将 `message` 作为 `props` 传递给子组件 `Child`，并且子组件渲染父组件传递的数据。

## 子组件通过回调函数向父组件传递数据

如果子组件需要将数据传回父组件，可以通过向子组件传递一个回调函数来实现。子组件在某些事件发生时调用该回调函数，将数据传递给父组件。

```jsx
function Parent() {
  const [message, setMessage] = useState('');

  const handleMessageChange = (newMessage) => {
    setMessage(newMessage);
  };

  return (
    <div>
      <h1>{message || '没有消息'}</h1>
      
    </div>
  );
}

function Child({ onMessageChange }) {
  const sendMessage = () => {
    onMessageChange('Hello from Child');
  };

  return (
    <div>
      <button onClick={sendMessage}>发送消息</button>
    </div>
  );
}
```

在这个例子中，父组件 `Parent` 向子组件 `Child` 传递了一个 `onMessageChange` 回调函数。当子组件中的按钮被点击时，子组件调用该回调函数，将数据传递给父组件，父组件更新其状态并重新渲染。

## 总结

父子组件通信是 React 中非常常见的需求，父组件可以通过 `props` 向子组件传递数据，子组件可以通过回调函数向父组件传递数据。这种方式确保了组件间的数据流向和状态管理，帮助我们实现组件化的设计理念。