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

Question

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

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

      {this.isCheckedComponent("Component") ? (

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

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

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

它给了我以下结果：

上面的链接对应组件不隐藏时的显示。 不隐藏

这个对应问题，可以看空间。 组件隐藏

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

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