菜鸟教程
教程 react tutorial

父子组件通信（props 回调）

父组件传递数据给子组件

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

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

  return (
    <div>
      <h1>{message}</h1>
      <Child message={message} />
    </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>
      <Child onMessageChange={handleMessageChange} />
    </div>
  );
}

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

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

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

总结

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

相关内容