我有一个使用 React 组件的复杂网页,我正在尝试将该页面从静态布局转换为响应速度更快、可调整大小的布局。然而,我一直遇到 React 的限制,想知道是否有处理这些问题的标准模式。在我的特定情况下,我有一个呈现为带有 display:table-cell 和 width:auto 的 div 的组件。
不幸的是,我无法查询组件的宽度,因为您无法计算元素的大小,除非它实际放置在 DOM 中(DOM 具有用于推断实际渲染宽度的完整上下文)。除了将它用于相对鼠标定位之类的事情之外,我还需要它来正确设置组件内 SVG 元素的宽度属性。
此外,当窗口调整大小时,如何在设置过程中将大小更改从一个组件传递到另一个组件?我们在 shouldComponentUpdate 中进行所有第 3 方 SVG 渲染,但您不能在该方法中为自己或其他子组件设置状态或属性。
是否有使用 React 处理此问题的标准方法?
最佳答案
你可能想要的生命周期方法是componentDidMount
这些元素已经放置在 DOM 中,您可以从组件的引用中获取有关它们的信息。
例子:
var Container = React.createComponent({
componentDidMount: function () {
var width = this.refs.svg.getDOMNode().offsetWidth;
},
render: function () {
<svg ref="svg" />
}
});
关于javascript - 如何从 DOM 获取水平尺寸?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33501635/