React中如何将子组件的值传递给主组件（App组件）

要实现子组件（NewFile）向父组件（App）传值，核心思路是父组件传递回调函数作为props给子组件，子组件通过调用这个回调函数把值传递回去，这是React中实现子向父传值的标准方式。结合你的代码，具体修改如下：

1. 修改父组件App.js #

在App中定义一个回调函数，用来接收子组件传来的值并更新variable1，然后把这个函数通过props传给NewFile：

import { useState } from 'react';
import NewFile from './NewFile';

const App = () => {
    const [variable1, setVariable1] = useState(0);

    // 定义回调函数，接收子组件传来的wholeText
    const updateVariable1 = (text) => {
        setVariable1(text);
    };

    return (
        <NewFile onTextUpdate={updateVariable1} />
    );
}
export default App;

2. 修改子组件NewFile.js #

首先修复原代码的无限重渲染问题：原代码直接在组件函数体中调用setWholeText，会导致组件反复渲染形成循环，必须用useEffect监听状态变化来处理更新逻辑；然后在wholeText更新时，调用父组件传来的回调函数把值传回去：

import { useState, useEffect } from 'react';

// 接收父组件传来的回调props
const NewFile = ({ onTextUpdate }) => {
    const [partText, setPartText] = useState("");
    const [wholeText, setWholeText] = useState("");

    // 监听partText变化，更新wholeText并通知父组件
    useEffect(() => {
        if (partText !== "") {
            const newWholeText = partText;
            setWholeText(newWholeText);
            // 调用父组件的回调，把新的wholeText传回去
            onTextUpdate(newWholeText);
        }
    }, [partText, onTextUpdate]); // 仅当partText或回调函数变化时执行

    // 返回有效的JSX元素（原代码直接返回{wholeText}不符合React语法）
    return <div>{wholeText}</div>;
}
export default NewFile;

关键逻辑说明 #

• 父组件通过props传递的回调函数，相当于给子组件提供了一个“通知父组件更新”的通道；
• 子组件在自身状态（wholeText）发生变化时，调用这个回调函数并传入新值，父组件就能拿到子组件的状态并更新自己的variable1；
• 用useEffect避免无限重渲染：只有当partText变化时才执行状态更新逻辑，不会触发无意义的重复渲染。

内容的提问来源于stack exchange，提问作者Venoz