React中如何实现不同函数组件间的数据传递与提交汇总？

方案1：状态提升（新手首选，轻量无额外依赖） #

这个方案适合5个组件都在同一个父级下的场景，核心是把所有组件的状态统一放到共同父组件管理：

• 父组件定义allData状态存储5个组件的所有数据，同时定义通用的更新函数透传给每个子组件
• 每个子组件内部数据发生变化时，调用props传入的更新函数，把自己的最新数据同步到父组件的allData里
• 点击提交按钮时，父组件直接把已经汇总完成的allData通过props传递给最后一个组件即可

示例代码 #

父组件代码：

import { useState } from 'react'
import Comp1 from './Comp1'
import Comp2 from './Comp2'
import Comp3 from './Comp3'
import Comp4 from './Comp4'
import Comp5 from './Comp5'

function Parent() {
  // 存储所有子组件的汇总数据
  const [allData, setAllData] = useState({
    comp1: {},
    comp2: {},
    comp3: {},
    comp4: {}
  })
  const [showComp5, setShowComp5] = useState(false)

  // 子组件更新数据的通用方法
  const updateData = (compKey, data) => {
    setAllData(prev => ({ ...prev, [compKey]: data }))
  }

  const handleSubmit = () => {
    setShowComp5(true)
  }

  return (
    <div>
      <Comp1 update={(data) => updateData('comp1', data)} />
      <Comp2 update={(data) => updateData('comp2', data)} />
      <Comp3 update={(data) => updateData('comp3', data)} />
      <Comp4 update={(data) => updateData('comp4', data)} />
      <button onClick={handleSubmit}>提交</button>
      {/* 提交后把汇总数据传给最后一个组件 */}
      {showComp5 && <Comp5 allData={allData} />}
    </div>
  )
}
export default Parent

子组件示例（以Comp1为例，其他子组件逻辑相同）：

import { useState } from 'react'

function Comp1({ update }) {
  const [inputVal, setInputVal] = useState('')

  const handleChange = (e) => {
    const val = e.target.value
    setInputVal(val)
    // 同步数据到父组件
    update({ inputValue: val })
  }

  return <input value={inputVal} onChange={handleChange} placeholder="Comp1输入框" />
}
export default Comp1

方案2：useContext 全局状态管理（适合组件嵌套深的场景） #

如果5个组件层级嵌套很深，逐层传props很繁琐，可以用React内置的useContext实现全局状态共享：

• 创建一个Context容器，统一存储所有组件的汇总数据和更新方法
• 用Context的Provider包裹所有5个组件，把状态和更新方法注入到组件树中
• 每个子组件通过useContext获取更新方法，同步自身数据到全局状态
• 提交时最后一个组件直接通过useContext就能拿到所有汇总数据

注意事项 #

• 如果你的项目规模很小，5个组件层级不深，优先用状态提升方案，逻辑更简单易懂，没有额外的学习成本
• 如果后续项目复杂度提升，也可以接入Zustand、Redux等第三方状态管理库，实现更复杂的跨组件数据共享

内容的提问来源于stack exchange，提问作者Jairiz Edward Esposo