將CSS添加到react / JSX以隱藏組件

Question

我正在基於復選框的狀態隱藏和顯示組件，並且正在使用三元運算符來確定該組件是顯示還是隱藏。 但是，此組件正在處理數據，因此最好使用CSS隱藏該組件，因為每次重新顯示該組件時，它都會創建一個新請求。 以下是三元運算符：

const displayWidget = this.state.checked ? <Widget /> : null;

我看過其他嘗試達到相同目的的示例，其中一些建議如下：

const divStyle = {
   visibility: 'hidden',
}

const displayWidget = this.state.checked ? <Widget /> : <Widget style= {divStyle} />`

第二個示例是正確的解決方法，而我只是做錯了什么，還是有另一種方法可以解決此問題？

Answer 1

簡單的答案是您可以執行任何一項操作，這只是基於您的要求。

返回null

const displayWidget = this.state.checked ? <Widget /> : null;

這樣做，這樣意味着當this.state.checked是true那么你Widget組件mounted和componentWillMount / componentDidMount將被調用。

但是，如果this.state.checked為false ，則將unmount Widget組件，如果將console.log粘貼在componentWillUnmount函數中，則會看到此消息。

如果this.state.checked為true （再次），則將再次mounted Widget組件，並將再次調用componentWillMount / componentDidMount 。

通過CSS隱藏

我將您的代碼更改為此：

const divStyle = {
   visibility: 'hidden',
}

const displayWidget = <Widget style= {...this.state.checked ? {} : divStyle} />

這種方式意味着在初始render且this.state.checked為true ，它將以與null方法相同的方式mount 。

但是，如果this.state.checked為false ，則不會調用unmount因為該組件仍在mounted而現在只是通過css隱藏。

隱藏組件但保持安裝狀態的另一種方法

<Widget visible={this.state.checked} />

在Widget組件的render()方法中，您可以執行以下操作：

render() {
  if (!this.props.visible) {
    return null;
  }
  return <span>widget content</span>;
}