React中如何从嵌套子组件获取父组件的div ref

你当前代码返回undefined的核心原因是没有将父组件声明的appRef向下传递给子组件，以下是两种可直接落地的实现方案：

方案1：逐层传递ref（适合嵌套层级≤3的场景） #

无需额外引入新逻辑，直接通过props逐层透传ref即可：

App.js 修改 #

将appRef作为props传给Products组件：

const appRef = useRef()

<div ref={appRef}>
  <div>
    <Switch>
      <PrivateRoute path="/products">
        {/* 新增innerRef属性传递appRef */}
        <Products innerRef={appRef} />
      </PrivateRoute>
    </Switch>
  </div>
</div>

Products.js 修改 #

将接收到的innerRef继续传递给PopUp组件：

componentDidMount(){
    console.log(this.props.innerRef) // 已可正常拿到appRef
}

render(){
    return (
      <PopUp parentRef={this.props.innerRef} />
    )
}

PopUp.js 修改 #

直接从props取传递过来的ref即可，无需使用forwardRef：

const PopUp = (props) => {
    console.log(props.parentRef) // 拿到appRef对象
    console.log(props.parentRef?.current?.offsetWidth) // 可正常读取div属性
    // 剩余组件逻辑
}

方案2：Context透传（适合嵌套层级深的场景） #

如果组件嵌套超过3层，逐层传props会非常冗余，可通过Context全局透传ref：

第一步：创建公共Context #

新建RefContext.js文件：

import { createContext, useContext } from 'react'
const AppRefContext = createContext()
// 封装自定义hook简化调用
export const useAppRef = () => useContext(AppRefContext)
export default AppRefContext

App.js 修改 #

用Context Provider包裹业务组件，传入appRef：

import AppRefContext from './RefContext'
const appRef = useRef()

<div ref={appRef}>
  <div>
    <AppRefContext.Provider value={appRef}>
      <Switch>
        <PrivateRoute path="/products">
          <Products />
        </PrivateRoute>
      </Switch>
    </AppRefContext.Provider>
  </div>
</div>

任意层级子组件调用（以PopUp.js为例） #

不需要中间组件传递ref，直接调用自定义hook即可获取：

import { useAppRef } from './RefContext'

const PopUp = () => {
    const appRef = useAppRef()
    console.log(appRef?.current?.offsetWidth) // 可正常读取div属性
    // 剩余组件逻辑
}

注意事项 #

• 读取ref属性时加可选链?.规避初始渲染时ref未挂载的null报错
• React 18严格模式下首次渲染ref会为null，第二次渲染会自动赋值，属于正常现象

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