Javascript 如何从DOM中获取水平大小?
我有一个使用React组件的复杂网页,我正在尝试将该网页从静态布局转换为更具响应性、可调整大小的布局。然而,我在React中不断遇到一些限制,我想知道是否有一种处理这些问题的标准模式。在我的特定情况下,我有一个组件,它以div的形式呈现,display:table cell和width:auto 不幸的是,我无法查询组件的宽度,因为您无法计算元素的大小,除非它实际放置在DOM中(DOM具有用于推断实际渲染宽度的完整上下文)。除了将其用于相对鼠标定位之类的事情之外,我还需要它来正确设置组件中SVG元素的宽度属性 此外,当窗口调整大小时,如何在设置过程中将尺寸变化从一个组件传递到另一个组件?我们正在shouldComponentUpdate中进行所有第三方SVG渲染,但您不能在该方法中设置自己或其他子组件的状态或属性Javascript 如何从DOM中获取水平大小?,javascript,jquery,html,css,reactjs,Javascript,Jquery,Html,Css,Reactjs,我有一个使用React组件的复杂网页,我正在尝试将该网页从静态布局转换为更具响应性、可调整大小的布局。然而,我在React中不断遇到一些限制,我想知道是否有一种处理这些问题的标准模式。在我的特定情况下,我有一个组件,它以div的形式呈现,display:table cell和width:auto 不幸的是,我无法查询组件的宽度,因为您无法计算元素的大小,除非它实际放置在DOM中(DOM具有用于推断实际渲染宽度的完整上下文)。除了将其用于相对鼠标定位之类的事情之外,我还需要它来正确设置组件中SVG
是否有一种使用React处理此问题的标准方法?您可能想要的生命周期方法是componentDidMount
元素已经放置在DOM中,您可以从组件的参照中获取有关它们的信息 例如:
var Container = React.createComponent({
componentDidMount: function () {
var width = this.refs.svg.getDOMNode().offsetWidth;
},
render: function () {
<svg ref="svg" />
}
});
var Container=React.createComponent({
componentDidMount:函数(){
var width=this.refs.svg.getDOMNode().offsetWidth;
},
渲染:函数(){
}
});
在componentDidMount中,您可以获得window.width或ReactDom.findDOMNode(this.width)。然后根据需要使用状态和通道中的宽度作为道具。还可以为调整大小事件设置侦听器