在React中，子组件向父组件传参（或称为"通信”）通常通过事件回调的方式实现。父组件向子组件传递一个函数作为props，子组件在需要时调用这个函数，并可以通过参数的形式向父组件传递数据。
下面是一个简单的例子来说明这个过程：
父组件（ParentComponent）
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const [childData, setChildData] = useState('');
// 这是一个由父组件传递给子组件的函数，用于接收子组件的数据
const handleChildData = (data) => {
setChildData(data);
};
return (
<div>
<h1>Parent Component</h1>
<p>Data from Child: {childData}</p>
<ChildComponent onReceiveData={handleChildData} />
</div>
);
}
export default ParentComponent;
子组件（ChildComponent）
import React from 'react';
function ChildComponent({ onReceiveData }) {
// 假设这里有一个按钮，点击时会触发数据传递
const sendDataToParent = () => {
const dataToSend = 'Hello from Child!';
onReceiveData(dataToSend); // 调用父组件传递的函数，并传递数据
};
return (
<div>
<h2>Child Component</h2>
<button onClick={sendDataToParent}>Send Data to Parent</button>
</div>
);
}
export default ChildComponent;
在这个例子中，ParentComponent 通过props向ChildComponent传递了一个名为onReceiveData的函数。这个函数在ParentComponent中被定义，用于更新ParentComponent的state（即childData）。当ChildComponent中的按钮被点击时，它会调用onReceiveData函数，并传递一个字符串'Hello from Child!'作为参数。这样，ParentComponent就能够接收到来自ChildComponent的数据，并更新其状态，从而在UI上反映出这一变化。
这种方式是React中实现组件间通信的一种常用且有效的方式，特别适用于父子组件之间的数据传递。
原文链接: https://blog.csdn.net/hexadecimal_001/article/details/140738079