如何在React中响应自动调整大小的DOM元素的宽度？
如何在React中响应自动调整大小的DOM元素的宽度？
提问于 2014-08-19 04:59:32
我有一个使用React组件的复杂web页面，正在尝试将页面从静态布局转换为更具响应性、可调整大小的布局。然而，我一直遇到React的限制，我想知道是否有一个标准模式来处理这些问题。在我的特定情况下，我有一个组件，它呈现为一个带有display:table-cell和width:auto的div。
不幸的是，我不能查询我的组件的宽度，因为您不能计算元素的大小，除非它实际放在DOM中(它有完整的上下文来推断实际呈现的宽度)。除了用于相对鼠标定位之类的事情之外，我还需要使用它来正确设置组件中的SVG元素的宽度属性。
此外，当窗口调整大小时，如何在安装过程中将大小更改从一个组件传递到另一个组件？我们所有的第三方SVG渲染都是在shouldComponentUpdate中进行的，但是你不能在该方法中设置自己或其他子组件的状态或属性。
有没有使用React处理这个问题的标准方法？
回答 2
Stack Overflow用户
发布于 2014-08-21 00:44:38
我认为您正在寻找的生命周期方法是componentDidMount。这些元素已经放置在DOM中，您可以从组件的refs中获取有关它们的信息。
例如：
var Container = React.createComponent({
componentDidMount: function () {
// if using React < 0.14, use this.refs.svg.getDOMNode().offsetWidth
var width = this.refs.svg.offsetWidth;
},
render: function () {
<svg ref="svg" />
}
});Stack Overflow用户
发布于 2015-05-04 05:20:19
对于couchand解决方案，您可以使用findDOMNode
var Container = React.createComponent({
componentDidMount: function () {
var width = React.findDOMNode(this).offsetWidth;
},
render: function () {
<svg />
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25371926
复制相关文章
相似问题