0

ResponsiveReactGridLayout でコンポーネントを非表示にしようとしていますが、他のコンポーネントがそれを埋めないため、コンポーネントが非表示になり、空のスペースが作成されます。

コンポーネントにリンクされたチェックボックスが非表示にチェックされているかどうかを確認します。

      {this.isCheckedComponent("Component") ? (

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

サイズもゼロに設定しましたが、機能していません。

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

次の結果が得られます。

上記のリンクは、コンポーネントが非表示でない場合の表示に対応しています。 隠れない

これは問題に対応しており、空間が見えます。 コンポーネントの非表示

4

1 に答える 1

0

たぶん、オプションは次の方法で三項条件になる可能性があります:

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 の場合は何も表示されません。

于 2019-04-12T15:00:27.887 に答える