将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>;
}