css - react 等待另一个组件完成渲染

Question

我有以下情况:2 组分 A 和 B。A 在页面布局中位于 B 之上。我希望使用它的 top 动态计算 B height css 规则。B 的 top 受 A 影响，因为 A 在其上方呈现。我附加了对 B 的引用，然后通过计算引用的边界矩形并从 top 计算所需的 height 来应用它的样式。
出现问题时组件 A 比组件 B 花费更多时间来完全渲染，因为 A 加载图像需要更多时间来加载，使得 B 的顶部在渲染后移动 a 因此 height 的计算函数需要在 A 完全渲染后以某种方式再次调用，但我不想让 B 耦合到 A 只是因为它先于它渲染，我该怎么做才能解决这个问题？

Answer 1

您可以使用 Css flexbox 解决它，检查下面的代码片段。

(function () {

    var loadImgBtn = document.getElementById('load-image-btn');
    var loadedImg = document.getElementById('loaded-image');
    loadImgBtn.addEventListener('click', function () {
        loadedImg.style.display = 'block';
    });


})();

.flexbox {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 350px;
}
#loaded-image {
    display: none;
}

#first-block {
    background: green;
}

#second-block {
    background: red;
    flex-grow: 1;
}

<div class="flexbox">
        <div id="first-block"> Component A
            <img id="loaded-image"
                src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
        </div>
        <div id="second-block">Component B</div>
</div>
<button id="load-image-btn">Load Image</button>

如果您想以编程方式计算它，您可以使用 ref或 forwardRef如果您需要像这样将 ref 进一步向下传递

const ComponentA = React.forwardRef((props, ref) => (
  <div ref={ref} className="componentA">
    {props.children}
  </div>
));

const ComponentB = React.forwardRef((props, ref) => (
  <div ref={ref} className="componentB">
    {props.children}
  </div>
));

class App extends React.Component{

  constructor(props){
    super(props);
    this.refA = React.createRef();
    this.refB = React.createRef();

  }

  componentDidMount(){
    console.log(this.refA.current.clientHeight,this.refB.current.clientHeight);
  }
  render(){

    return (
      <div className="App">
        <ComponentA calculatedHeight={componentAHeight} ref={this.refA} >Component A</ComponentA>
        <ComponentB calculatedHeight={componentBHeight} ref={this.refB} >Component B</ComponentB>
      </div>
    );
  }

}

您可以使用 findDOMNode 来做到这一点也是(它在严格模式下被描述)。 react-sizeme也可能有帮助。