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

Question

我正在尝试隐藏ResponsiveReactGridLayout上的组件，但是一个组件隐藏它会创建空白空间，因为其他组件没有填充它。

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

      {this.isCheckedComponent("Component") ? (

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

我也将大小设置为零，但它也不起作用。

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

当条件为真时，将评估条件，它将显示组件，当条件为假时，它将不显示任何内容。