如何从DOM中获取水平大小

Question

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

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

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

使用React有标准的方法来处理这个问题吗？

Answer 1

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

示例：

var Container = React.createComponent({
  componentDidMount: function () {
    var width = this.refs.svg.getDOMNode().offsetWidth;
  },
  render: function () {
    <svg ref="svg" />
  }
});

Answer 2

在componentDidMount中，您可以获得window.width或ReactDom.findDOMNode（this）.width。然后使用状态中的宽度，并根据需要作为道具传递。您还可以为调整大小事件设置侦听器。