React中如何将孙组件数据传递给父组件及兄弟组件？

要不要使用useContext可以根据你的组件嵌套深度、后续共享范围来选择，两种常用实现方式如下：

方案1：状态提升（组件层级≤3层时优先选择） #

你的场景只有孙组件、父组件、兄弟组件三类主体需要访问数组，层级不深的情况下优先用状态提升即可，没有额外的上下文开销，逻辑更简单：

• 把info数组的状态定义在所有需要用到它的组件的公共祖先（也就是你说的父组件）中：const [info, setInfo] = useState([])
• 将setInfo更新方法通过props逐层传递给孙组件，孙组件点击按钮时直接调用这个方法更新父组件的状态
• 父组件直接通过props把info传递给需要访问它的兄弟组件即可

示例代码：

// 父组件
import { useState } from 'react'
import ChildA from './ChildA' // 内部嵌套孙组件的子组件
import ChildB from './ChildB' // 需要访问info的兄弟组件

export default function Parent() {
  const [info, setInfo] = useState([])
  return (
    <div>
      <ChildA setInfo={setInfo} />
      <ChildB info={info} />
    </div>
  )
}

// 孙组件
export default function GrandChild({ setInfo }) {
  const handleClick = () => {
    // 生成需要更新的数组内容，调用父组件传入的更新方法
    const newInfo = ['内容1', '内容2']
    setInfo(newInfo)
  }
  return <button onClick={handleClick}>更新共享数组</button>
}

方案2：useContext（组件层级深/多组件共享时使用） #

如果后续还有更多深层嵌套的组件需要访问这个info数组，逐层透传props太繁琐，就可以用useContext实现：

• 单独创建Context文件定义共享状态和更新方法
• 用Context Provider包裹所有需要访问该状态的组件树
• 孙组件、兄弟组件都可以直接通过useContext拿到info和更新方法，不需要逐层传参

示例代码：

// InfoContext.js
import { createContext, useContext, useState } from 'react'

const InfoContext = createContext()

export function InfoProvider({ children }) {
  const [info, setInfo] = useState([])
  return (
    <InfoContext.Provider value={{ info, setInfo }}>
      {children}
    </InfoContext.Provider>
  )
}

// 封装自定义Hook简化调用
export function useInfo() {
  return useContext(InfoContext)
}

// 父组件引入Provider包裹子组件
import { InfoProvider } from './InfoContext'
import ChildA from './ChildA'
import ChildB from './ChildB'

export default function Parent() {
  return (
    <InfoProvider>
      <ChildA />
      <ChildB />
    </InfoProvider>
  )
}

// 孙组件直接调用更新方法
import { useInfo } from './InfoContext'

export default function GrandChild() {
  const { setInfo } = useInfo()
  const handleClick = () => {
    setInfo(['内容1', '内容2'])
  }
  return <button onClick={handleClick}>更新共享数组</button>
}

// 兄弟组件直接获取数组
import { useInfo } from './InfoContext'

export default function ChildB() {
  const { info } = useInfo()
  return <div>共享数组内容：{JSON.stringify(info)}</div>
}

如果你的项目已经接入了Redux、Zustand这类状态管理库，也可以直接把info存入全局状态调用，逻辑和Context方案一致

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