添加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，如果您在console.log功能中粘贴componentWillUnmount，看到这个。

如果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与null方法相同。

但是，当this.state.checked为false时，unmount被 NOT 调用，因为该组件仍为mounted，但现在只是隐藏了css。

隐藏组件但保持挂载的另一种方法

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

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

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