React组件间的通信

在React中，组件间的通信可以通过以下几种方式实现：

1. 父子组件通信：

   • 父组件通过props向子组件传递数据或回调函数。
   • 子组件通过props接收数据或回调函数，并在需要时调用回调函数向父组件传递数据。

   // 父组件
   function ParentComponent() {
   const handleChildMessage = (message) => {
   console.log("Child message received:", message);
   };
   return (
   <div>
   <h1>Parent Component</h1>
   <ChildComponent onMessage={handleChildMessage} />
   </div>
   );
   }
   
   // 子组件
   function ChildComponent({ onMessage }) {
   const handleButtonClick = () => {
   const message = "Hello from Child Component!";
   onMessage(message); // 调用回调函数向父组件传递数据
   };
   return (
   <div>
   <h2>Child Component</h2>
   <button onClick={handleButtonClick}>Send Message</button>
   </div>
   );
   }

2. 兄弟组件通信：

   • 兄弟组件间通信通常通过共同的父组件来实现。父组件作为中间件，将需要传递的数据或事件存储在父组件的状态中，然后通过props将数据或事件传递给需要接收的子组件。

   // 父组件
   function ParentComponent() {
   const [message, setMessage] = useState("");
   const handleChildMessage = (newMessage) => {
   setMessage(newMessage); // 更新父组件状态中的消息
   };
   return (
   <div>
   <h1>Parent Component</h1>
   <ChildComponent1 message={message} onMessage={handleChildMessage} />
   <ChildComponent2 message={message} />
   </div>
   );
   }
   
   // 子组件（兄弟组件）
   function ChildComponent1({ message, onMessage }) {
   const handleButtonClick = () => {
   onMessage("Hello from Child Component 1!"); // 更新父组件状态中的消息
   };
   return (
   <div>
   <h2>Child Component 1</h2>
   <button onClick={handleButtonClick}>Send Message</button>
   </div>
   );
   }