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

Question

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

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

是否适合使用三元运算符？

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

React.Fragment还好吗？

基本上，如果 viewButtonClicked 为 false，我想 return/render null。

Answer 1

是的，应该没问题。另外你可以这样做

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

Answer 2

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

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

或short-circuit && 运算符。

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

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

Best practices for react conditional rendering?