如何在React中响应自动调整大小的DOM元素的宽度？

JavaScript

小宇宙飞云

2020-03-12

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

不幸的是，我无法查询组件的宽度，因为您无法计算元素的大小，除非将其实际放置在DOM（具有推论实际渲染宽度的完整上下文）中。除了将其用于诸如相对鼠标定位之类的事情之外，我还需要它来在组件内的SVG元素上正确设置宽度属性。

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

是否有使用React处理此问题的标准方法？

第1349篇《如何在React中响应自动调整大小的DOM元素的宽度？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
gia 2020.03.13

除了沙发和解决方案，您还可以使用findDOMNode

var Container = React.createComponent({

  componentDidMount: function () {
    var width = React.findDOMNode(this).offsetWidth;
  },

  render: function () {
    <svg />
  }
});
村村西里Green 2020.03.13

我认为您正在寻找的生命周期方法是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" />
  }

});

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android