时间戳

首页 > 解决方案 > 如何从子组件检测 DOM 中呈现的父组件

reactjs - 如何从子组件检测 DOM 中呈现的父组件

问题描述

我有几个子组件需要在父组件渲染后设置样式。样式与位置和大小相关，并通过确定页面中的父组件高度/宽度来计算。因此，我需要先渲染父组件，然后才能设置子组件的样式。

我不能让子组件成为父组件的一部分。

我尝试在父组件上使用 ref，然后在 componentDidMount() 期间在每个项目组件上触发 props.onItemRendered() 回调，但我发现在所有子组件安装后父组件调用 componentDidMount() - 因此我的父项目参考为空。

我应该如何解决这个问题？我没主意了

标签： reactjs

解决方案

在渲染父级之前不会渲染子级。如果您从不渲染父级，则永远不会渲染子级。

您可以在子级上使用百分比 CSS 值，它将相对于父级。

像这样的东西：

#parent {
  position: relative;
  height: 100px;
  width: 100px;
  border: 2px solid black;
  background-color: blue;
}

#child {
  position: absolute;
  width: 50%;
  height: 50%;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color: red;
  border: 1px dashed white;
}
<div id='parent'>
  <div id='child'></div>
</div>

推荐阅读