React如何通过Hooks在子组件中获取父组件宽度并监听变化

问题原因 #

• 组件挂载阶段ref的current属性还未赋值。React 会在组件完成DOM挂载后才会给ref的current填充对应的DOM实例，而子组件的useEffect首次执行时机早于父组件ref的赋值完成时机，此时访问parentRef.current自然是undefined。
• 如果Parent是函数组件，默认不支持直接绑定ref，需要用React.forwardRef对Parent组件做包裹转发，才能将ref正确绑定到Parent内部的根DOM节点上（类组件无需该处理）。

解决方案 #

步骤1：对Parent组件做ref转发（仅Parent为函数组件时需要）

// Parent组件定义时用forwardRef包裹
const Parent = React.forwardRef((props, ref) => {
  // 将传入的ref绑定到内部的根DOM节点上
  return <div ref={ref} className="parent-wrapper">
    {props.children}
  </div>
})

步骤2：在Child组件中增加非空判断，同时用ResizeObserver监听宽度变化

const Child = ({parentRef}) => {
  useEffect(() => {
    // 先判断ref是否已经挂载完成，避免访问undefined
    if(!parentRef.current) return
    
    // 监听父组件宽度变化
    const resizeObserver = new ResizeObserver(entries => {
      const parentWidth = entries[0].contentRect.width
      // 这里写宽度变化后要执行的自定义逻辑
      console.log('父组件实时宽度：', parentWidth)
    })
    resizeObserver.observe(parentRef.current)
    
    // 组件卸载时取消监听，避免内存泄漏
    return () => {
      resizeObserver.disconnect()
    }
  }, [parentRef])

  return <div>子组件内容</div>
}

父组件调用逻辑保持原有写法即可：

const parentRef = useRef();

return(
  <Parent ref={parentRef}>
    <Child parentRef={parentRef}/>
  </Parent>
)

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