Question

我有以下情况： 2个组件A和B。在页面布局中，A高于B。我希望使用height动态计算B top的CSS规则。 B的top受A影响，因为A呈现在其上方。我给B附加了一个引用，然后通过计算ref的边界rect并从height计算出所需的top来应用样式。
当组件A花费更多时间时会出现问题完全比组件B渲染，因为A加载的图像要花更多的时间来加载，使得B的顶部在已经渲染之后才移位a，因此需要在A之后以某种方式再次调用函数height的计算已完全渲染，但我不想仅仅因为B在A之前就使其与A耦合，我该如何解决这个问题？

Answer 1

您可以使用CSS Flexbox解决此问题，请在下面查看代码段。

awk '$2{printf("%s\n",$2)}$3{printf("%s\n",$3)}' file

(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;
}

如果您要以编程方式进行计算，可以使用ref或forwardRef，如果您需要将ref进一步传递给类似的对象

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

您也可以使用findDOMNode（在严格模式下不推荐使用）进行操作。 react-sizeme可能也有帮助。

反应以等待另一个组件完成渲染

1 个答案: