React:在渲染之前知道元素的大小

Question

假设一个组件在呈现之前需要知道它的大小.用我的知识,我可以这样做:呈现组件,在componentDidMount获得DOM节点和提取大小出来,与大小更新状态,然后再次渲染(让我们不要使之与事件侦听器,我连接到窗口的复杂调整大小事件,让我们假设窗口不调整),它的工作原理,但似乎脏,第一渲染仅仅是资源的浪费,我想知道元素的大小(或容器),它的渲染之前,我知道大多数的时间元素本身声明了大小,但在某些情况下,父元素声明了大小,我的情况就是其中一种情况.总而言之,有没有办法在呈现之前访问react组件的parent元素(在componentWillMount中)？

PS我知道反应强度,但我想要一个更简单的解决方案,不需要外部插件.我只想知道是否可以在reactWillMount中访问parentWillMount中的父节点.

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

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 可能无法渲染封闭的组件!在初始渲染时,它只渲染包含<div>.只有在componentDidMount()调用它并找到父级的尺寸之后,才会渲染所包含的组件,并且现在提供父级的尺寸.

所以另一个答案就是在知道父级的维度之前不要渲染组件的内容.使用react-dimensions变得容易,因为在尺寸已知之前甚至不会渲染.但你也可以做同样的事情,在你的componentDidMount()抓取尺寸中获取参考,然后简单地if(){}渲染一下你的组件的真实内容,直到你知道尺寸.(你至少需要一个外部的<div>来获得你自己的参考)