在 React 中，父子组件之间的通信（传参和传方法）
✅ 一、什么是父子组件传参和传方法？
在 React 的组件树中：
- 父组件：调用并包含子组件的组件
- 子组件：被父组件调用、渲染的组件
传参（传递数据）：父组件把自己的 数据（如字符串、数字、对象、数组等） 传递给子组件，子组件接收并使用这些数据来渲染 UI。
传方法（传递函数）：父组件把自己的 函数（方法） 传递给子组件，子组件在合适的时机（比如用户点击按钮）调用这个方法，从而实现 子组件向父组件通信 / 通知父组件做某些事情。
🧩 二、React 数据流动是单向的（父 → 子）
React 的核心原则之一是：数据流向是单向的，通常是从父组件流向子组件。
父组件通过 props（属性） 向子组件传递 数据 或 方法，子组件通过接收 props 来使用它们。
✅ 三、1. 父组件向子组件传参（传递数据）
📌 场景：父组件有一份数据（比如用户名、列表、配置等），要传给子组件去展示
✅ 示例代码：
1）父组件（ParentComponent.jsx）
import React from 'react';
import ChildComponent from './ChildComponent';function ParentComponent() {const message = 'Hello from Parent!';const user = { name: 'Alice', age: 25 };return (<div><h1>这是父组件</h1>{/* 向子组件传递数据：message 和 user */}<ChildComponent msg={message} userInfo={user} /></div>);
}export default ParentComponent;2）子组件（ChildComponent.jsx）
import React from 'react';function ChildComponent(props) {// props 是一个对象，包含父组件传递过来的所有属性return (<div><h2>这是子组件</h2><p>父组件对我说：{props.msg}</p><p>用户信息：{props.userInfo.name}，年龄：{props.userInfo.age}</p></div>);
}export default ChildComponent;✅ 说明：
- 父组件通过
<ChildComponent msg={message} userInfo={user} />的方式，把数据以 属性（props） 的形式传给子组件 - 子组件通过
props.msg和props.userInfo来接收并使用这些数据 - 你可以传递任意类型的数据：字符串、数字、对象、数组、布尔值等
✅ 更优雅的写法（使用解构）：
子组件中可以这样写，更简洁：
function ChildComponent({ msg, userInfo }) {return (<div><p>{msg}</p><p>{userInfo.name} ({userInfo.age}岁)</p></div>);
}✅ 四、2. 父组件向子组件传方法（传递函数，实现子 → 父通信）
📌 场景：子组件需要在某个时机（比如点击按钮、输入内容）通知父组件做某事，比如保存数据、触发事件、更新状态等。
实现方式就是：父组件把一个函数以 props 形式传给子组件，子组件在合适的时机调用这个函数，并可传回一些参数。
✅ 示例代码：
1）父组件（ParentComponent.jsx）
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';function ParentComponent() {const [messageFromChild, setMessageFromChild] = useState('');// 1. 定义一个方法，用于接收子组件传来的数据const handleChildData = (data) => {setMessageFromChild(data);};return (<div><h1>父组件</h1><p>子组件对我说：{messageFromChild}</p>{/* 2. 把方法以 prop 的形式传给子组件 */}<ChildComponent onSendMessage={handleChildData} /></div>);
}export default ParentComponent;2）子组件（ChildComponent.jsx）
import React from 'react';function ChildComponent({ onSendMessage }) {const handleClick = () => {// 3. 子组件调用从父组件传来的方法，并传参数onSendMessage('你好，我是子组件发来的消息！');};return (<div><h2>子组件</h2><button onClick={handleClick}>给父组件发送消息</button></div>);
}export default ChildComponent;✅ 说明：
| 步骤 | 说明 |
|---|---|
| ① | 父组件定义了一个函数 handleChildData，用于接收子组件传来的信息 |
| ② | 父组件通过 prop onSendMessage={handleChildData} 把这个函数传给子组件 |
| ③ | 子组件通过 props.onSendMessage（或解构为 onSendMessage）接收到这个函数，并在按钮点击时调用它，同时传参 '你好...' |
| ④ | 父组件从而接收到子组件传来的数据，并更新自己的状态，实现 子 → 父通信 |
✅ 函数命名惯例（推荐）：
虽然你可以随意命名这个函数 prop，但推荐使用清晰的、语义化的命名，比如：
| 用途 | 推荐 prop 名称 |
|---|---|
| 子组件通知父组件 | onSubmit、onSave、onButtonClick、onMessageSend |
| 父组件传给子组件的回调 | onChange、onClick、onSelect |
例如：
<ChildComponent onSubmit={handleSubmit} />✅ 五、3. 传参 + 传方法 综合示例
场景：子组件是一个输入框，用户输入内容后点击按钮，把输入的内容传给父组件并显示
父组件：
import React, { useState } from 'react';
import ChildInput from './ChildInput';function ParentComponent() {const [inputValue, setInputValue] = useState('');const handleInputChange = (value) => {setInputValue(value);};return (<div><h1>父组件</h1><p>你输入的内容是：{inputValue}</p><ChildInput onInputSubmit={handleInputChange} /></div>);
}export default ParentComponent;子组件：
import React, { useState } from 'react';function ChildInput({ onInputSubmit }) {const [text, setText] = useState('');const handleSubmit = () => {onInputSubmit(text); // 调用父组件方法，传入输入框的值};return (<div><inputtype="text"value={text}onChange={(e) => setText(e.target.value)}placeholder="请输入内容"/><button onClick={handleSubmit}>提交给父组件</button></div>);
}export default ChildInput;✅ 六、总结：父子组件传参与传方法
| 功能 | 说明 | 传递方式 | 代码体现 |
|---|---|---|---|
| 父 → 子：传参（数据） | 父组件向子组件传递数据（字符串、对象等）用于渲染或逻辑 | 通过 props 传给子组件 | <Child data={value} />，子组件通过 props.data 使用 |
| 父 → 子：传方法（函数） | 父组件向子组件传递一个函数，子组件在某个时机调用它，实现子向父通信 | 通过 props 传函数 | <Child onClick={handler} />，子组件调用 props.onClick() |
| 子 → 父：通信 | 子组件通过调用父组件传来的函数，并传参，通知父组件做事情 | 本质是父传方法，子调用 | 子组件调用 props.onEvent(data)，父组件接收并处理 |
| 传参 + 传方法 综合 | 既传数据，又传回调，实现灵活交互 | props 传参 + 传函数 | 最常见的业务场景写法 |
✅ 七、补充：TypeScript 中的类型定义（推荐）
如果你使用 TypeScript，可以为 props 定义明确的类型，提高代码可靠性，比如：
interface ChildProps {msg: string;userInfo: { name: string; age: number };onSendMessage: (data: string) => void;
}✅ 八、总结一句话：
在 React 中，父组件通过 props 向子组件传递数据和方法，实现数据的展示与交互控制；子组件通过调用父组件传来的方法，将自己的状态或用户行为反馈给父组件，从而实现双向通信。这是 React 组件通信最基础、最核心的机制。