React：如何将对象数据传递给父组件并跨组件复用？

React遵循单向数据流原则，子组件不能直接修改父组件的props，需要通过回调函数将数据传递给父组件，再由父组件管理状态并传递给其他子组件。以下是针对你的场景的具体实现步骤：

1. 修改App.js：管理状态并传递回调函数 #

在App组件中使用useState存储计算后的年龄数据，同时定义一个回调函数接收子组件传来的数据，最后将数据传递给Modal组件。

import { useState } from 'react';
import UserAgeForm from './UserAgeForm';
import Modal from './Modal';
import ReactDOM from 'react-dom';

function App() {
    // 初始化状态存储年龄数据，初始值为null表示还未计算
    const [userAgeData, setUserAgeData] = useState(null);

    // 回调函数：接收子组件传来的计算结果并更新状态
    const handleReceiveUserData = (calculatedData) => {
        setUserAgeData(calculatedData);
    };

    return (
        <>
            {/* 将回调函数传给UserAgeForm子组件 */}
            <UserAgeForm onSendUserData={handleReceiveUserData} />
            {ReactDOM.createPortal(
                {/* 将状态中的数据传给Modal子组件 */}
                <Modal resultData={userAgeData} />,
                document.getElementById("modal")
            )}
        </>
    );
}

export default App;

2. 修改UserAgeForm.js：调用回调函数传递数据 #

移除直接修改props的代码，改为调用父组件传来的回调函数，将计算好的年龄数据传递回去。

// 接收父组件传来的回调函数props
const UserAgeForm = ({ onSendUserData }) => {
    // 你的其他状态定义（currentDate、birthDay、currentMonth等）
    // ...

    const onSubmitHandler = (e) => {
        e.preventDefault();
        const calcAge = () => {
            let calcYear;
            let calcMonth;
            let calcDay;

            if (currentDate < birthDay || currentMonth < birthMonth) {
                calcDay = currentDate + currentMonthDays - birthDay;
                calcMonth = currentMonth + 11 - birthMonth;
                calcYear = currentYear - 1 - birthYear;
            } else {
                calcDay = currentDate - birthDay;
                calcMonth = currentMonth - birthMonth;
                calcYear = currentYear - birthYear;
            }

            // 调用父组件的回调函数，传递计算结果
            onSendUserData({
                year: calcYear,
                month: calcMonth,
                day: calcDay,
            });
        };
        calcAge();
    };

    // 你的表单渲染逻辑
    // ...
};

export default UserAgeForm;

3. Modal.js：接收并展示数据 #

在Modal组件中接收父组件传递的resultData，并根据数据是否存在来渲染内容：

const Modal = ({ resultData }) => {
    // 如果还没有计算数据，可返回null不显示弹窗，或提示用户先计算
    if (!resultData) {
        return null;
    }

    return (
        <div className="modal-container">
            <h3>年龄计算结果</h3>
            <p>
                {resultData.year}岁 {resultData.month}个月 {resultData.day}天
            </p>
        </div>
    );
};

export default Modal;

核心要点说明 #

• 单向数据流：React中数据只能从父组件流向子组件，子组件要传递数据给父组件必须通过回调函数触发父组件的状态更新。
• 状态管理：App组件作为中间层，通过useState统一管理计算后的年龄数据，确保所有依赖该数据的子组件能同步获取最新值。
• 避免直接修改props：props是只读的，直接修改会导致React报错，必须通过回调函数让父组件自己更新状态。

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