Добавить невидимый элемент в реакции

Question

У меня есть нечто, похожее на следующее

<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> работает, и правый блок появляется в правой части экрана. Как я мог решить это? Должен ли я объявить «невидимый» элемент вместо левого блока?

Answer 1

Существует несколько способов решения этой проблемы.

Здесь работает демо в реакции

Примечание: здесь я использую jquery только для демонстрационных целей.

1. добавить 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>

Answer 2

Попробуйте, левая часть имеет 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>

Answer 3

попробуйте использовать сетку CSS. Я чувствую, что это более чистый путь -

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


}

Answer 4

Ты имеешь в виду это?

вам просто нужно заранее указать className в зависимости от mustShow например: className={container ${shouldShow && 'disabled-left-component'}}

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