如何在React项目中将子组件的数据传递给父组件

在React应用开发过程中，经常需要从子组件向父组件传递数据。这通常可以通过回调函数或使用状态管理库如Redux来实现。

子组件示例

import React from 'react';

// 子组件
const ChildCompOnent= (props) => {
    const variable1 = 900;
    const variable2 = 450;

    const sendDataToParent = () => {
        props.onDataReceived(variable1, variable2);
    };

    return (
        

            发送数据到父组件
        

    );
};

export default ChildComponent;

父组件示例

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

// 父组件
const ParentCompOnent= () => {
    const [receivedData, setReceivedData] = useState({ variable1: null, variable2: null });

    const handleDataFromChild = (var1, var2) => {
        setReceivedData({ variable1: var1, variable2: var2 });
        console.log(`收到子组件的数据：变量1=${var1}, 变量2=${var2}`);
    };

    return (
        

            
            
接收到的变量1: {receivedData.variable1}

            
接收到的变量2: {receivedData.variable2}

        

    );
};

export default ParentComponent;

以上代码展示了如何通过定义一个回调函数，并将其作为属性传递给子组件，从而实现在子组件触发事件时调用此回调函数，将数据传递回父组件。这种方式简单且适用于大多数场景，特别是当父子组件间关系较为紧密时。