javascript – 如何从DOM中获取横向大小？

2023年10月10日 181次阅读

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

不幸的是,我无法查询我的组件的宽度,因为你无法计算元素的大小,除非它实际上放在DOM中(它具有用于推导实际渲染宽度的完整上下文).除了将它用于相对鼠标定位之类的东西之外,我还需要这个来正确设置组件内SVG元素的宽度属性.

此外,当窗口调整大小时,如何在安装过程中将大小更改从一个组件传递到另一个组件？我们在shouldComponentUpdate中执行所有第三方SVG渲染,但您无法在自己或该方法中的其他子组件上设置状态或属性.

有没有一种使用React处理这个问题的标准方法？

最佳答案 您可能想要的生命周期方法是componentDidMount

元素已经放置在DOM中,您可以从组件的引用中获取有关它们的信息.

例：

var Container = React.createComponent({

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

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

});
点赞