在反应中添加不可见元素答案

【问题标题】：Add invisible element in react在反应中添加不可见元素
【发布时间】：2018-04-28 02:15:15
【问题描述】：

我有如下所示的东西

<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 <div>.</div> 中添加一个 Char 可以工作，并且右侧的块出现在屏幕的右侧。我怎么能解决这个问题？我应该添加一个“不可见”元素而不是左块吗？

【问题讨论】：

float: right 没用？你能在codesandbox.io/s/new上创建一个stackoverflow.com/help/mcve吗？
如果有任何答案解决了您的问题，请考虑通过单击复选标记并投票来接受它。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己提供了一些声誉。没有义务这样做。

标签： css reactjs flexbox

【解决方案1】：

试试这个，左边有display:none 在父级上使用justify-content:flex-end; 将块保留在右侧，并删除左侧块上的浮动

.flex {
  display:flex;
  width: 500px;
  height: 500px;
  flex-direction: row;
  border: 1px solid black;
  justify-content:flex-end;
}


.left {
  width:50%;
  background-color: teal;
  display:none;
}


.right {
   width:50%;
  background-color: orange;
}

<div class="flex">
  <div class="left"></div>
  <div class="right"></div>
</div>

【讨论】：

【解决方案2】：

你是认真的吗？

你只需要预定义类名取决于 shouldShow 例如：className={container ${shouldShow && 'disabled-left-component'}}

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

【讨论】：

这也不行，RightBlock 会在左边
和.disabled-left-component {justify-content: flex-end} 或对齐项目

【解决方案3】：

尝试使用 css grid。我觉得它更干净-

.left{
   grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}
.right {
 grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

.container {
  display: grid;
  grid-column-gap: 15px;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto;


}

【讨论】：

【解决方案4】：

有多种方法可以解决这个问题。

demo 正在反应中

注意：这里我使用 jquery 仅用于演示目的。

添加justify-content: flex-end;

$("#toggle-left").on('click', function(){
    $('.left').toggle();
});

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

.left {
 padding: 50px 0;
 background-color: black;
 flex: 1 1 50%;
 max-width: 50%;
}
.right {
padding: 50px 0;
background-color: red;
flex: 1 1 50%;
max-width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="left">left</div>
  <div class="right">right</div>
</div>

<button id="toggle-left">Toggle Left</button>

【讨论】：