在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回调传递给子组件。这样，子组件可以通过触发回调来更新父组件的状态，实现了从子组件到父组件的通信。