反应条件渲染的最佳实践？答案

【问题标题】：Best practices for react conditional rendering?反应条件渲染的最佳实践？
【发布时间】：2020-10-23 18:16:28
【问题描述】：

我有一个 div/section 应该在切换按钮时显示

{
  this.state.viewButtonClicked ?  <Solution solution= {this.state.activeSolution}/> : <React.Fragment/>
}

是否使用了适合于此的三元运算符？

在这种情况下，如果按钮为 false，不显示内容的最佳做法是什么？

React.Fragment 好吗？

基本上，如果 viewButtonClicked 为 false，我想返回/呈现 null。

【问题讨论】：

【解决方案1】：

是的，应该没问题。此外，您可以这样做

  {
       this.state.viewButtonClicked && <Solution solution={this.state.activeSolution}/>
  }

【讨论】：

【解决方案2】：

可以继续使用三元运算符，如下

{
  this.state.viewButtonClicked ? <Solution solution={this.state.activeSolution}/> : null;
}

或短路 && 运算符。

{
  this.state.viewButtonClicked && <Solution solution={this.state.activeSolution}/>
}

您可以阅读this article，了解有关使用 7 种不同方法的 React 条件渲染最佳实践的更多详细信息。

【讨论】：