有条件地呈现组件而不丢失“空”空间- ReactJS

Question

我想知道如何在不损失组件空间的情况下有条件地呈现组件。基本上，我想消除其他组件的转移，因为这个div

​

有什么建议吗？下面是我代码的一部分：

   const [displayFeedbackMessage, setDisplayFeedbackMessage ] = useState();

 useEffect(() => {
        setDisplayFeedbackMessage(
            <div>
            {
                displaySelectionResult &&
                selected > 0 &&
                <div>
                    {Pluralize("document", selected, true)}
                    {" "}selected out of{" "}
                    {Pluralize("document", available, true)}
                    {" "}available.
                </div>
            }

            {
                displayActionResult &&
                <div>
                    {Pluralize("document", actioned, true)}
                    {" "} downloaded out of{" "}
                    {Pluralize("document", requested, true)}
                    {" "}requested.
                </div>
            }
            </div>
       
        )

    },[selected, available, actioned, requested])

   return (

        <div>{displayFeedbackMessage}</div>

    );

Answer 1

只需将visibility样式添加到div包含消息中，然后将其设置为visible : hidden以显示或隐藏它。

style={{ height: '50px', visibility : condition ? 'visible' : 'hidden' }}

Answer 2

您可以使用样式可见性(隐藏或可见)或不透明 (0或1)。它们有点不同，因为您可以read here。