添加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>; 
}