添加CSS來反應/ 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的Widget組件將unmount，如果你在componentWillUnmount功能貼console.log，你會看到這一點。

如果this.state.checked是true（再次），那麼你Widget成分是mounted（再次）和componentWillMount/componentDidMount將被調用（再次）。

通過CSS隱藏

我想你的代碼改成這樣：

const divStyle = { 
    visibility: 'hidden', 
} 

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

這種方式意味着在初始render和this.state.checked是true那麼它將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>; 
}