如何在多层嵌套组件中实现子组件到父组件的ref传递？

当需要在跨多层的组件间传递ref时，forwardRef仅能处理直接父子组件的传递场景，这时可以通过以下两种方案解决：

方案一：逐层透传Ref #

让中间组件（Header）也通过forwardRef接收上层传入的ref，再向下传递给子组件（Menu），实现逐层透传。

修改后的代码示例 #

• 子组件（Menu）：保持原有实现不变

const Menu = forwardRef((props, menuRef) => { 
  return <div ref={menuRef}></div>
})

• 父组件（Header）：改为forwardRef组件，将接收的ref传递给Menu

const Header = forwardRef((props, menuRef) => {
  return <Menu ref={menuRef} />
})

• 祖父组件（Layout）：创建ref并传递给Header，即可直接获取Menu的DOM引用

const Layout = () => {
  const menuRef = useRef(null)
  
  // 可在此处直接通过menuRef操作Menu的DOM元素
  useEffect(() => {
    if (menuRef.current) {
      console.log('已获取Menu的DOM节点：', menuRef.current)
    }
  }, [])
  
  return <Header ref={menuRef} />
}

方案二：使用Context共享Ref #

如果组件嵌套层级较深，逐层透传会增加代码冗余，可通过React Context直接共享ref，跳过中间组件的传递环节。

实现步骤 #

1. 创建Ref共享Context

const MenuRefContext = createContext(null)

2. 祖父组件（Layout）提供ref

const Layout = () => {
  const menuRef = useRef(null)
  
  return (
    <MenuRefContext.Provider value={menuRef}>
      <Header />
    </MenuRefContext.Provider>
  )
}

3. 子组件（Menu）直接使用Context中的ref

const Menu = () => {
  const menuRef = useContext(MenuRefContext)
  return <div ref={menuRef}></div>
}

这种方式下，中间的Header组件无需处理任何ref相关逻辑，适合嵌套层级多、透传成本高的场景。

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