在 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;

✅ 说明：

✅ 函数命名惯例（推荐）：

虽然你可以随意命名这个函数 prop，但推荐使用清晰的、语义化的命名，比如：

例如：

<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;

✅ 六、总结：父子组件传参与传方法

✅ 七、补充：TypeScript 中的类型定义（推荐）

如果你使用 TypeScript，可以为 props 定义明确的类型，提高代码可靠性，比如：

interface ChildProps {msg: string;userInfo: { name: string; age: number };onSendMessage: (data: string) => void;
}

✅ 八、总结一句话：

在 React 中，​父组件通过 props 向子组件传递数据和方法，实现数据的展示与交互控制；子组件通过调用父组件传来的方法，将自己的状态或用户行为反馈给父组件，从而实现双向通信。这是 React 组件通信最基础、最核心的机制。