Next.js中如何将子组件修改后的数据传递给父组件？

在React（包括Next.js）生态中，子组件向父组件传递数据的标准做法是父组件传递一个回调函数给子组件，子组件处理完数据后调用这个回调，把修改后的数据作为参数传回去。下面是针对你的代码的具体修改方案：

1. 修改Canvas父组件 #

首先用useState管理数据状态，确保数据更新时组件能自动重新渲染；然后定义回调函数接收子组件传回的新数据；最后把数据和回调一起传给Preview子组件。

// Canvas.js
'use client'
import { useState } from 'react'
import Preview from '@/components/Preview'

const Canvas = (props) => {
    // 用useState维护数据状态，初始值为demoData
    const [demoData, setDemoData] = useState({
        width: 50,
        height: 50
    })

    // 回调函数：接收子组件传回的新数据并更新状态
    const handleDataChange = (newData) => {
        setDemoData(newData)
        // 可根据需求对传回的数据做后续处理
        console.log('Preview传回的新数据:', newData)
    }

    return(
        <div>
            {/* 将数据和回调函数传递给Preview */}
            <div><Preview data={demoData} onDataChange={handleDataChange} /></div>
            {/* 展示更新后的数据，验证回传是否成功 */}
            <div>当前数据：宽度{demoData.width}，高度{demoData.height}</div>
            {props.children}
        </div>
    )
}

export default Canvas

2. 修改Preview子组件 #

从props中拿到父组件传入的data和onDataChange回调，处理完数据后调用回调把新数据传回去。这里用useEffect模拟组件挂载后传递数据的场景，你也可以根据实际需求在用户点击、输入等事件中触发。

// Preview.js
import { useEffect } from 'react'

const Preview = (props) => {
    // 从props.data中解构原始的宽高
    const { width, height } = props.data

    // 模拟数据处理逻辑，比如将宽高各增加10
    const modifiedData = {
        width: width + 10,
        height: height + 10
    }

    // 组件挂载后调用回调，传递修改后的数据
    useEffect(() => {
        props.onDataChange(modifiedData)
    }, [props.data, props.onDataChange]) // 依赖项确保数据变化时重新触发

    return (
        <div>
            原始数据：宽度{width}，高度{height}
            <br />
            修改后数据：宽度{modifiedData.width}，高度{modifiedData.height}
        </div>
    )
}

export default Preview

关键说明 #

• 状态管理：父组件通过useState维护数据，保证数据更新时组件能重新渲染，展示最新状态
• 回调传递：父组件的handleDataChange是数据回传的桥梁，负责接收子组件的新数据并更新自身状态
• 触发时机：子组件可以在任意合适的时机调用onDataChange，比如组件初始化、用户操作（按钮点击、表单输入）等，根据业务需求调整即可

内容的提问来源于stack exchange，提问作者Musa Gökcan