ReactJS：如何从子组件访问父元素的宽度？

Question

已修复：我错过了将.current添加到我的引用中...

我需要知道将包含我的组件的元素的宽度：看着SO，我找到了一个解决方案，但它对我不起作用（返回未定义）：

import React from 'react';

import './Badger.css';

export default function Badger(props) {

  const refContainer = React.useRef(null);

  React.useLayoutEffect(()=>{
    // console.log(refContainer); I missed .current, now it works
    console.log(refContainer.current); // Change the line to this
  });

  const items = props.items ? props.items : [];

  return <div ref={refContainer}>{ items.join(", ") }</div>

}

在这种情况下，父元素是td：

<td>
  <Badger
    items={r.to}
    listContainerWidth={recipientsWidth}
  />
</td>

但是console.log返回“ undefined”。如何获取父元素？

Answer 1

我在裁判中错过了.current。如果按以下方式编辑代码，它将解决此问题！

React.useLayoutEffect(()=>{
  // console.log(refContainer); I missed .current, now it works
  console.log(refContainer.current); // Change the line to this
});