javascript - 添加 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 时，Widget 组件将卸载，如果您坚持componentWillUnmount 函数中的 console.log 你会看到这个。

如果 this.state.checked 为 true(再次)，则您的 Widget 组件被挂载(再次) 和 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 不会被调用，因为组件是仍然是 mounted 但现在只是通过 css 隐藏。

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

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

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

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