React中如何将props从父组件传递到孙组件？有更简便的实现方式吗？

下面是4种比逐层手动传props更简便的实现方案，你可以根据自己的业务场景选择：

• 组件组合（官方优先推荐）
  完全避免中间组件做「props传声筒」，父组件直接将孙组件作为children传给子组件，中间层只需要负责渲染传入的children即可，示例逻辑如下：

  // 父组件
  function Parent() {
    const passValue = '要传递给孙组件的值'
    return (
      <Child>
        <GrandChild value={passValue} />
      </Child>
    )
  }
  // 中间子组件，完全不需要处理和passValue相关的props
  function Child(props) {
    return <div className="child-wrapper">{props.children}</div>
  }
  // 孙组件直接拿到父组件传的value
  function GrandChild(props) {
    return <span>{props.value}</span>
  }
  

• Context API（官方跨层级共享方案）
  适合需要在多个嵌套层级下共享的公共状态（比如主题、用户登录信息），不需要经过任何中间组件即可完成传值：

  // 1. 先创建Context
  const ValueContext = React.createContext()
  // 2. 父组件用Provider包裹后代，传入要共享的值
  function Parent() {
    const passValue = '要传递给孙组件的值'
    return (
      <ValueContext.Provider value={passValue}>
        <Child />
      </ValueContext.Provider>
    )
  }
  // 3. 中间子组件不需要做任何处理
  function Child() {
    return <GrandChild />
  }
  // 4. 孙组件直接用useContext取值
  function GrandChild() {
    const value = React.useContext(ValueContext)
    return <span>{value}</span>
  }
  

• 属性展开透传
  如果你不想改动现有组件嵌套结构，可以直接在中间组件用展开运算符快速透传所有props，不需要手动逐个声明传递：

  // 中间子组件，所有接收到的props直接全部传给孙组件
  function Child(props) {
    return <GrandChild {...props} />
  }
  

• 全局状态管理库
  如果你的项目本身已经接入了Zustand、Redux、Jotai等状态管理工具，可以直接将需要跨层级传递的状态存入全局store，任意层级组件都可以直接读取/修改该状态，适合大型项目中频繁跨层级交互的场景。

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