Javascript 将CSS添加到react/JSX以隐藏组件

我根据复选框的状态隐藏和显示一个组件，并使用三元运算符来决定该组件是显示还是隐藏。但是，该组件正在处理数据，因此最好使用CSS隐藏该组件，因为每次重新显示该组件时，它都会创建一个新的请求。下面是三元运算符：

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

const displayWidget=this.state.checked？：无效的

我看过其他试图实现同样目标的例子，其中一些建议如下：

const divStyle = {
   visibility: 'hidden',
}

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

const divStyle={
可见性：“隐藏”，
}
const displayWidget=this.state.checked？：`

---

第二个例子是正确的方法，而我只是做错了什么，还是有其他方法来解决这个问题？

简单的答案是你可以做任何一个，这只是基于你的需求

返回空值

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

这种方式意味着，在初始

呈现
和
时，此.state.checked
为
true
时，它将
以与null方法相同的方式装载

但是，当
此.state.checked
为
false
时，
卸载
为未调用，因为组件仍
已装载
，但现在仅通过
css
隐藏

隐藏组件但保持其安装的替代方法

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

我会使用第二种方法，因为当元素的值为
null
时，我不知道
JSX
在
DOM
中插入了什么。如果你知道的话，去做吧。最好是：
DisplayWidget=
。感谢你！我更倾向于后两种选择，因为我是通过第一种方法来实现的，它是有效的，但这可能不是我实现它的最佳方式。当我尝试使用CSS隐藏时，在this.state.checked之前，我在传播上遇到了一个意外的令牌错误，现在正在查看它
<Widget visible={this.state.checked} />

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