Javascript 如何在Reactjs中获得子项宽度

这是一个在线示例

---

但是如何获得

的宽度呢？我理解在reactjs中使用DOM可能并不常见。但是有没有一种方法可以得到宽度呢？谢谢

使用

refs

获取DOM元素（渲染后）。如果需要多个图元的宽度，请使用多个参照和一些算术运算，或使用包络父对象

类MyComponent扩展了React.Component{ 构造函数（）{ 超级（）； this.elementRef=React.createRef（）； } componentDidMount（）{ //获取你的裁判的BCR const bcr=this.elementRef.current.getBoundingClientRect（） log（{width:bcr.width}）； } render（）{ 返回( 你好，世界！ ); } } ReactDOM.render（，document.getElementById（'root'））

见参考文献。谢谢如果有很多元素可以玩，那么需要为所有元素创建

ref

。这不是一种有效的方法，但可能是唯一的方法？确实如此（除非你可以通过测量它们的边界元素来逃避）。谢谢你的回答，如果我们知道孩子们的

className

，我们可以只使用

document.getElementsByClassName吗（'ChildrenClassName'）

？在'componentDidMount（）{}'中，您可以这样做（假设类没有损坏）。避免DOM操作和其他操作（如果不必要）只是一个一般的经验法则，但有时您必须弄脏手。

const Parent = styled.div`
  display: flex;
  width: 100%;
  background: yellow;
  justify-content: space-between;
`;

const Children = styled.div`
  display: flex;
  background: tomato;
  height: 50px;
  flex: 0 0 10%;
`;

function App() {
  return (
    <Parent>
      <Children />
      <Children />
      <Children />
      <Children />
      <Children />
    </Parent>
  );
}

document.querySelectorAll(CHILDREN).forEach(e=> {
e.clientWidth
})