Блог

Главная - Вопросы по программированию - Отзывчивый-макет сетки пустые блоки, когда компоненты скрыты

Отзывчивый-макет сетки пустые блоки, когда компоненты скрыты

#reactjs #react-grid-layout

#reactjs #react-grid-layout

Вопрос:

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

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

       {this.isCheckedComponent("Component") ? (

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

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

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

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

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

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

Ответ №1:

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

https://codesandbox.io/s/yv4q5xl2wx

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

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

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

Комментарии:

1. Это не работает, потому что ResponsiveReactGridLayout нужен ключ. Я получаю следующую ошибку «Uncaught TypeError: не удается прочитать свойство ‘key’ null».

2. @NicolasRoche Я сгенерировал этот пример, чтобы вы могли следить за ним, когда компонент, который вы не хотите показывать: codesandbox.io/s/yv4q5xl2wx (Это есть в моем ответе)

3. Я пытался проверить значение состояния (IsChecked), но когда я пытаюсь скрыть, я получаю «Не удается прочитать свойство ‘key’ null». Это связано только с ResponsiveReactGridLayout