如何从 DOM 中获取水平尺寸？

Posted 2023-03-05

【中文标题】如何从 DOM 中获取水平尺寸？

【英文标题】：How get the horizontal-size from the DOM?

【发布时间】：2016-02-03 18:05:46

【问题描述】：

我有一个使用 React 组件的复杂网页，我正在尝试将页面从静态布局转换为响应速度更快、可调整大小的布局。但是，我一直遇到 React 的限制，我想知道是否有处理这些问题的标准模式。在我的具体情况下，我有一个组件呈现为带有 display:table-cell 和 width:auto 的 div。

不幸的是，我无法查询组件的宽度，因为您无法计算元素的大小，除非它实际放置在 DOM 中（它具有推断实际渲染宽度的完整上下文）。除了将它用于相对鼠标定位之类的事情之外，我还需要它来正确设置组件内 SVG 元素的宽度属性。

此外，当窗口调整大小时，我如何在设置过程中将大小变化从一个组件传递到另一个组件？我们在 shouldComponentUpdate 中进行所有第 3 方 SVG 渲染，但您不能在该方法中设置您自己或其他子组件的状态或属性。

是否有使用 React 处理此问题的标准方法？

【参考方案1】：

你可能想要的生命周期方法是 componentDidMount 元素已经放置在 DOM 中，您可以从组件的 refs 中获取有关它们的信息。

例子：

var Container = React.createComponent(

  componentDidMount: function () 
    var width = this.refs.svg.getDOMNode().offsetWidth;
  ,

  render: function () 
    <svg ref="svg" />
  

);

【参考方案2】：

在 componentDidMount 中你可以得到 window.width 或 ReactDom.findDOMNode(this).width。然后使用 state 中的宽度并根据需要作为道具传递。您还可以为 resize 事件设置监听器。