Question

假设组件在呈现之前需要知道它的大小。据我所知，我可以这样做：渲染组件，在componentDidMount中获取DOM节点并从中提取大小，用该大小更新状态，然后再次渲染（不要让事件监听器复杂化我附加到窗口的resize事件，让我们假设窗口没有调整大小）它工作但看起来很脏，第一个渲染只是浪费资源，我想知道元素（或它的容器）在渲染之前的大小，我知道元素本身大部分时间都会声明它的大小，但是在某些情况下，父元素声明了大小，我的情况就是其中一种情况。总而言之，有没有办法在呈现之前访问react组件的parent元素（在componentWillMount中）？

P.S。我知道反应暗淡，但我想要一个不需要外部插件的简单解决方案。我只想知道是否有可能在componentWillMount中访问父节点是否有反应。

Answer 1

答案是否定的，但请阅读有关如何应对的想法。

如果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()

子项2.2.5.4的

componentDidMount()在其之前为其父项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 可能无法呈现所附的组件！在初始渲染时，它只渲染包含＆lt; div＆gt;。只有在调用componentDidMount()后才能找到父级的维度，只有才能渲染所包含的组件，现在提供父级的维度。

所以另一个答案是在您知道父级的维度之前不要渲染组件的内容。使用react-dimensions可以轻松实现，因为在维度已知之前，您甚至无法渲染。但是你也可以做同样的事情，在你的componentDidMount()中获取引用并抓住维度，然后简单地在if(){}周围呈现组件的真实内容，直到你知道尺寸。（你至少需要一个外部＆lt; div＆gt;才能得到你自己的参考资料）

React：在呈现元素之前知道元素的大小

1 个答案: