在渲染之前从 virtualDOM 访问父节点 |反应JS

Question

我需要根据父元素设置组件尺寸。是否可以在渲染之前从 virtualDOM 中通过 ref 获取父级的宽度和高度？

父母

export default class App extends React.Component {
  render() {

    return (
      <div>
        <div className={'avocado-container'} ref={(container) => { this.container = container; }}>
          <Resizer parent={this} scrollAxis={'y'}>
          </Resizer>
        </div>
      </div>
    );
  }
}

我需要在 child 的构造函数中获取尺寸。

this.refs.container.offsetWidth 之类的有可能吗？

Answer 1

否。 布局尺寸由浏览器计算，而不是虚拟 DOM。要么手动设置尺寸，要么使用 CSS 使您的子组件填充宽度和高度。您还可以从componentDidMount 中的渲染组件读取宽度和高度，并在那里调用setState，这并不理想，会导致第二次渲染，但有时需要完成。