11 React 组件通信 父传子

在React中实现组件通信是非常常见的需求，其中包括父子组件通信。以下是几种常见的父子组件通信的例子，以及需要注意的知识：

1. Props传递：
   这是最基本的父子组件通信方式。父组件通过props将数据传递给子组件。

   // ParentComponent.js
   import React from 'react';
   import ChildComponent from './ChildComponent';
   
   function ParentComponent() {
       const data = "Hello from Parent";
       return <ChildComponent data={data} />;
   }
   
   // ChildComponent.js
   import React from 'react';
   
   function ChildComponent(props) {
       return <div>{props.data}</div>;
   }
   

   注意事项：

   • Props是只读的，子组件不能直接修改props，只能由父组件传递。
   • 父组件通过props将数据传递给子组件，子组件通过props接收数据。

2. 回调函数传递：
   父组件通过props将回调函数传递给子组件，子组件调用该函数来与父组件通信。

   // ParentComponent.js
   import React, { useState } from 'react';
   import ChildComponent from './ChildComponent';
   
   function ParentComponent() {
       const [message, setMessage] = useState("");
   
       const handleMessage = (msg) => {
           setMessage(msg);
       };
   
       return (
           <div>
               <ChildComponent handleMessage={handleMessage} />
               <p>Message from Child: {message}</p>
           </div>
       );
   }
   
   // ChildComponent.js
   import React from 'react';
   
   function ChildComponent(props) {
       const handleClick = () => {
           props.handleMessage("Hello from Child");
       };
   
       return <button onClick={handleClick}>Send Message</button>;
   }
   

   注意事项：

   • 父组件通过回调函数的形式将能够修改父组件状态的方法传递给子组件。
   • 子组件调用该回调函数来通知父组件发生了某些事件或状态变化。

3. Context API：
   React的Context API允许您在组件树中传递数据，而无需在每个层级手动传递props。

   // MyContext.js
   import React from 'react';
   
   const MyContext = React.createContext();
   
   export default MyContext;
   
   // ParentComponent.js
   import React from 'react';
   import ChildComponent from './ChildComponent';
   import MyContext from './MyContext';
   
   function ParentComponent() {
       return (
           <MyContext.Provider value="Hello from Context">
               <ChildComponent />
           </MyContext.Provider>
       );
   }
   
   // ChildComponent.js
   import React, { useContext } from 'react';
   import MyContext from './MyContext';
   
   function ChildComponent() {
       const data = useContext(MyContext);
       return <div>{data}</div>;
   }
   

   注意事项：

   • Context API适用于在组件树中传递全局数据，但在小型应用中不建议滥用。
   • 可以在整个组件树中访问Context提供的值，而不需要手动将props逐层传递给每个子组件。

在实现组件通信时，需要注意以下几点：

• 父子组件之间的通信应该保持单向数据流，即父组件向子组件传递数据或回调函数，而不是相反。
• 避免直接修改props，props应该被视为不可变的。
• 使用适当的方法传递数据，如Props传递、回调函数、Context API等，根据具体场景选择合适的方式。
• 尽量将通信逻辑封装在组件内部，使组件更加可重用和独立。