假设一个组件在渲染之前需要知道它的大小。据我所知，我可以这样做： 渲染组件，在 componentDidMount 中获取 DOM 节点并从中提取大小，使用该大小更新状态，然后再次渲染（不要让我附加到窗口的 resize 事件的事件侦听器变得复杂，假设窗口没有'不调整大小） 它可以工作但看起来很脏，第一次渲染只是浪费资源，我想在渲染之前知道元素（或其容器）的大小，我知道大多数时候元素本身声明了大小，但是有些情况当父元素声明大小时，我的情况就是其中一种情况。 所以总结一下，有没有办法在渲染之前访问反应组件的父元素（在componentWillMount中）？
附：我知道反应维度，但我想要一个不需要外部插件的更简单的解决方案。我只是想知道是否可以在 react 中访问 componentWillMount 中的父节点。
【问题讨论】：
标签： reactjs
答案是否定的，但请阅读有关如何应对的想法。
如果 DOM 元素不存在，则无法找到它的尺寸。在每个组件的第一次渲染完成之前，DOM 元素不存在。在调用组件的 componentDidMount() 之前，您无法了解此 DOM 元素或其父元素的任何信息。
还要注意组件的呈现顺序。在组件树/链的初始渲染中，子组件的 componentDidMount() 将在父组件的 componentDidMount() 之前调用！这是嵌套菜单树中的日志快照：
(MenuItemSubmenu:handleRefSet) appMenu:2.2.5.4 handleRefSet()
(MenuItemSubmenu:componentDidMount) appMenu:2.2.5.4 componentDidMount()
(MenuPane:handleRefSet) appMenu:2.2.5 handleRefSet()
(MenuPane:componentDidMount) appMenu:2.2.5 componentDidMount()
(MenuItemSubmenu:handleRefSet) appMenu:2.2.5 handleRefSet()
(MenuItemSubmenu:componentDidMount) appMenu:2.2.5 componentDidMount()
(MenuPane:handleRefSet) appMenu:2.2 handleRefSet()
(MenuPane:componentDidMount) appMenu:2.2 componentDidMount()
(MenuItemSubmenu:handleRefSet) appMenu:2.2 handleRefSet()
(MenuItemSubmenu:componentDidMount) appMenu:2.2 componentDidMount()
componentDidMount() 子项 2.2.5.4 在其父项 2.2.5 之前被调用。从中我们可以看出，父组件在对子组件的所有处理完成之前，无法知道自己的 DOM 元素。嗯，哇！
但是，为了解决您的问题，我在组件的 componentDidMount() 方法中添加了一些日志记录。我登录了this.refToOurDom.parentElement，发现它被定义了并且看起来不错！
(MenuItemSubmenu:handleRefSet) appMenu:2.2.5.4 parent dims: height 76 width 127
因此，您的问题的答案是，不，您的 DOM 元素在 componentWillMount() 中尚不存在，并且父元素在初始渲染时也不存在。您必须等到调用componentDidMount() 才能找出任何组件的尺寸。
但请注意react-dimensions 使用的技巧。也许这会给你一些想法如何构建你的代码。
在其render() 方法react-dimensions 可能不会渲染封闭的组件！在初始渲染时，它只渲染包含的
componentDidMount() 被调用并且它发现了父级的尺寸之后，只有这样才会渲染封闭的组件，现在提供父级的尺寸。
所以另一个答案是在您知道父组件的尺寸之前不要渲染组件的内容。使用react-dimensions 使这很容易，因为在知道尺寸之前您甚至不会被渲染。但是你也可以做同样的事情，在你的componentDidMount() 中获取引用并获取尺寸，然后简单地将if(){} 放在渲染组件的真实内容周围，直到你知道尺寸. （你至少需要一个外部
【讨论】：