Question

我正在尝试在ResponsiveReactGridLayout上隐藏组件，但是将某个组件隐藏起来会创建空白空间，因为其他组件无法填充它。

我检查链接到组件的复选框是否已隐藏。

      {this.isCheckedComponent("Component") ? (

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

我也将size设置为零，但是它也不起作用。

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

它给了我以下结果：

以上链接对应于组件未隐藏时的显示。 Not Hiding

这个对应问题，可以看到空格。 Component Hiding

Answer 1

使用以下方式，选项可能是三元条件：

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>
    );
  }

当条件为true时将评估条件，它将显示组件，而条件为false时将不显示任何内容。

隐藏组件时的响应式网格布局空白块

1 个答案: