Responsive-grid-layout пустые блоки, когда компоненты скрыты - PullRequest
Новая
       9

Responsive-grid-layout пустые блоки, когда компоненты скрыты

0 голосов
/ 12 апреля 2019

Я пытаюсь скрыть компонент в ResponsiveReactGridLayout, но компонент скрыть, он создает пустое пространство, потому что другие компоненты не заполняют его.

Я проверяю, установлен ли флажок, связанный с компонентом, чтобы скрыть или нет. 

      {this.isCheckedComponent("Component") ? (

        <div key="Component">
           Test
      </div>
      ) : (
        <div key="Component"  style={hideElement}></div>
      )}

Я также установил размер на ноль, но он тоже не работает. 

const hideElement = {
  display: "none",
  width: 0,
  height: 0,
}

Это дает мне следующий результат:

Выше ссылка соответствует отображению, когда компонент не скрывается. Не прячется

Это соответствует проблеме, вы можете увидеть пространство. скрытие компонентов

1 Ответ

0 голосов
/ 12 апреля 2019

Возможно, параметром может быть троичное условие следующим образом:

https://codesandbox.io/s/yv4q5xl2wx

Функция визуализации : 

  render() {
    return (
      <div>
        {this.state.waffles &&
          this.state.waffles.map(waffle =>
            waffle.isChecked ? <div key={waffle.id}>{waffle.name}</div> : null
          )}
      </div>
    );
  }

условие будет оценено, когда оно истинно, оно покажет компонент, а когда условие ложно, оно ничего не покажет.

...