ReactJS：如何从子组件获取父元素宽度？修正ref后仍遇异常

先帮你搞定refContainer.current返回undefined的问题，再来说怎么拿到父元素<td>的宽度。

为什么ref.current还是undefined？ #

你的代码里useLayoutEffect没有添加依赖数组，它会在每次组件渲染时都执行，包括初始渲染的第一个周期——这时候DOM可能还没完成挂载，所以会拿到undefined。

给useLayoutEffect加上空的依赖数组，让它只在组件挂载完成后执行一次就好：

React.useLayoutEffect(()=>{
  console.log(refContainer.current); // 现在应该能正常拿到DOM元素了
}, []); // 空数组确保只在组件挂载时运行一次

如果加了之后还是undefined，排查这两个点：

• 确认<Badger>组件确实被渲染了，没有被条件渲染逻辑隐藏（比如props.items为空时有没有被设置为不显示？你的代码里默认给了空数组，应该会渲染空的div）
• 检查父元素<td>有没有被设置display: none或者其他会导致子元素不渲染的样式

如何获取父元素（td）的宽度？ #

拿到refContainer.current之后，直接通过parentElement就能获取到父元素<td>，然后取它的宽度即可：

React.useLayoutEffect(()=>{
  if (refContainer.current) {
    const parentTd = refContainer.current.parentElement;
    if (parentTd) {
      // 根据需求选择offsetWidth或clientWidth
      const parentWidth = parentTd.offsetWidth;
      console.log("父元素td的宽度：", parentWidth);
      // 如果需要把宽度传给父组件，可以调用props回调，比如props.onParentWidthChange(parentWidth)
    }
  }
}, []);

简单说下两个宽度属性的区别：

• offsetWidth：包含元素宽度、内边距（padding）、边框（border），不含外边距（margin）和滚动条
• clientWidth：包含元素宽度、内边距，不含边框、外边距和滚动条

如果父元素<td>的宽度会动态变化（比如窗口 resize、内容更新导致宽度改变），可以用ResizeObserver结合窗口resize监听来实时获取：

React.useLayoutEffect(()=>{
  if (!refContainer.current) return;
  const parentTd = refContainer.current.parentElement;
  if (!parentTd) return;

  // 定义获取宽度的逻辑
  const getParentWidth = () => {
    const width = parentTd.offsetWidth;
    console.log("父元素td实时宽度：", width);
    // 这里可以做后续处理，比如更新组件状态或者通知父组件
  };

  // 初始获取一次宽度
  getParentWidth();

  // 监听窗口resize事件
  window.addEventListener('resize', getParentWidth);

  // 用ResizeObserver监听td自身尺寸变化
  const observer = new ResizeObserver(getParentWidth);
  observer.observe(parentTd);

  // 组件卸载时清理监听
  return () => {
    window.removeEventListener('resize', getParentWidth);
    observer.disconnect();
  };
}, []);

另外提一句：如果你的<td>在表格里，表格设置了table-layout: fixed，这时候td的宽度会按表格规则分配，你获取到的宽度就是最终渲染的实际宽度，是准确的。

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