我如何获得孩子的大小，以便我可以在 ReactJS 中居中？答案

【问题标题】：How do I get size of child so I can center it in ReactJS?我如何获得孩子的大小，以便我可以在 ReactJS 中居中？
【发布时间】：2021-09-30 14:27:13
【问题描述】：

我想在 ReactJS 中将一个绝对定位的 DIV 居中，它的文本内容会发生变化。

function Center(props) {
  const divRef = useRef(null);
  const [width, setWidth] = useState();
  const offset = -width/2;

  useEffect(() => {
    if(divRef.current) setWidth(divRef.original.offsetWidth);
  }, []);

  return <div ref={divRef} style={{left: props.x + offset}}>{props.message}</div>
}

在 DIV 的内容发生更改后，我一直不知道如何获取 DIV 的大小，以便我可以通过设置样式左/右来居中。

我无法连接到window.onresize，因为 DIV 的大小与窗口大小无关，而与文本内容有关。
这是一个简化的例子，实际例子更复杂，所以我不能用纯CSS布局来居中。我必须以像素为单位分配style.left 才能完成它。
我可以在初始渲染时获取宽度，但我需要在每次文本更改时更新宽度。

【问题讨论】：

标签： reactjs

【解决方案1】：

您可以使用divRef.current.getBoundingClientRect() (getBoundingClientRect) 来获取元素的大小。

编辑：答案是将props.message添加到useEffect的依赖数组中。这将在每次props.message 更改而不是仅在初始渲染时执行 useEffect 中的代码（用于计算宽度）。有关此答案，请参阅 cmets。

【讨论】：

我已经在使用 offsetWidth 了，但是当文本内容发生变化时我无法获得更新的值。
您能否将props.message 添加到您的useEffect 依赖数组中，并像useEffect(() => {/*your original code + */ offset = -width/2; }, [props.message]) 一样重新计算useEffect 中的偏移量。当消息（文本内容）发生变化时，它应该重新计算宽度。
将prop.message 添加到依赖项有效。我不敢相信我错过了。我已将您的答案标记为正确:)，我建议您更新您的答案以包括将来的读者理解。