在 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 (
这是父组件
{/* 向子组件传递数据：message 和 user */}
);
}
export default ParentComponent;
2）子组件（ChildComponent.jsx）
import React from 'react';
function ChildComponent(props) {
// props 是一个对象，包含父组件传递过来的所有属性
return (
这是子组件
父组件对我说：{props.msg}
用户信息：{props.userInfo.name}，年龄：{props.userInfo.age}
);
}
export default ChildComponent;

✅ 说明：

  • 父组件通过 <ChildComponent msg={message} userInfo={user} /> 的方式，把数据以 ​属性（props）​​ 的形式传给子组件
  • 子组件通过 props.msg 和 props.userInfo 来接收并使用这些数据
  • 你可以传递任意类型的数据：字符串、数字、对象、数组、布尔值等

✅ 更优雅的写法（使用解构）：

子组件中可以这样写，更简洁：

function ChildComponent({ msg, userInfo }) {
return (
{msg}
{userInfo.name} ({userInfo.age}岁)
);
}

✅ 四、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 (
父组件
子组件对我说：{messageFromChild}
{/* 2. 把方法以 prop 的形式传给子组件 */}
);
}
export default ParentComponent;
2）子组件（ChildComponent.jsx）
import React from 'react';
function ChildComponent({ onSendMessage }) {
const handleClick = () => {
// 3. 子组件调用从父组件传来的方法，并传参数
onSendMessage('你好，我是子组件发来的消息！');
};
return (
子组件
);
}
export default ChildComponent;

✅ 说明：

步骤说明
①父组件定义了一个函数 handleChildData，用于接收子组件传来的信息
②父组件通过 prop onSendMessage={handleChildData} 把这个函数传给子组件
③子组件通过 props.onSendMessage（或解构为 onSendMessage）接收到这个函数，并在按钮点击时调用它，同时传参 '你好...'
④父组件从而接收到子组件传来的数据，并更新自己的状态，实现 ​子 → 父通信​

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

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

用途推荐 prop 名称
子组件通知父组件onSubmit、onSave、onButtonClick、onMessageSend
父组件传给子组件的回调onChange、onClick、onSelect

例如：

✅ 五、3. 传参 + 传方法 综合示例

场景：子组件是一个输入框，用户输入内容后点击按钮，把输入的内容传给父组件并显示

父组件：

import React, { useState } from 'react';
import ChildInput from './ChildInput';
function ParentComponent() {
const [inputValue, setInputValue] = useState('');
const handleInputChange = (value) => {
setInputValue(value);
};
return (
父组件
你输入的内容是：{inputValue}
);
}
export default ParentComponent;

子组件：

import React, { useState } from 'react';
function ChildInput({ onInputSubmit }) {
const [text, setText] = useState('');
const handleSubmit = () => {
onInputSubmit(text); // 调用父组件方法，传入输入框的值
};
return (
 setText(e.target.value)}
placeholder="请输入内容"
/>
);
}
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 组件通信最基础、最核心的机制。

posted @ 2025-08-21 20:57  yjbjingcha  阅读(44)  评论(0)    收藏  举报