React 父子组件

在React中，组件之间的通信可以是单向的，也可以是双向的。父子组件之间的通信是最常见的，通常使用props（属性）进行单向通信，而使用自定义事件（回调函数）进行双向通信。

以下是一个简单的例子，展示了如何在父子组件之间通过props传递信息和使用回调函数来实现通信。

// 子组件 - 接收props和回调函数
function ChildComponent(props) {
  // 使用props接收数据
  const { message, onChangeMessage } = props;
 
  // 使用回调函数更新消息
  const updateMessage = (newMessage) => {
    onChangeMessage(newMessage);
  };
 
  return (
    <div>
      <p>{message}</p>
      <input type="text" onChange={(e) => updateMessage(e.target.value)} />
    </div>
  );
}
 
// 父组件 - 传递props和回调函数
function ParentComponent() {
  const [parentMessage, setParentMessage] = React.useState('');
 
  // 回调函数，用于更新父组件的状态
  const handleChangeMessage = (newMessage) => {
    setParentMessage(newMessage);
  };
 
  return (
    <div>
      <ChildComponent
        message={parentMessage}
        onChangeMessage={handleChangeMessage}
      />
    </div>
  );
}
 
// 渲染父组件到DOM
ReactDOM.render(<ParentComponent />, document.getElementById('root'));

在这个例子中，ChildComponent 是一个子组件，它通过props接收一个message和一个onChangeMessage回调函数。ParentComponent 是一个父组件，它通过状态parentMessage来管理消息，并且将其作为message prop传递给子组件，同时将handleChangeMessage函数作为onChangeMessage回调传递给子组件。这样，子组件可以通过触发回调来更新父组件的状态，实现了从子组件到父组件的通信。