时间戳

首页 > 解决方案 > 在反应中添加不可见元素

css - 在反应中添加不可见元素

问题描述

我有如下所示的东西

<Container>
<LeftBlock />
<RightBlock/>
<Container>

#container{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
}

#rightBlock{
display: flex;
    float: right;
}

这按预期工作。左块在左边，右边在右边。有时我想隐藏左块

<Container>
{(shouldShow) ? (
<LeftBlock />
) : null }
<RightBlock/>
<Container>

右边的方块现在在左边。我也试过这个，但它没有用

<Container>
{(shouldShow) ? (
<LeftBlock />
) : (<div></div>) }
<RightBlock/>
<Container>

在 div 中添加一个 Char<div>.</div>作品，右侧块出现在屏幕右侧。我怎么能解决这个问题？我应该添加一个“不可见”元素而不是左块吗？

标签： cssreactjsflexbox

解决方案

你是这个意思吗？

您只需要根据 shouldShow 预定义 className 例如：className={container ${shouldShow && 'disabled-left-component'}}

<Container> {shouldShow && <LeftBlock />} <RightBlock/> <Container>

推荐阅读