在JSX中反应if / else

Question

我正在从API提取JSON数据，然后需要在react组件中显示它。我需要使用if / else条件。对于前。JSON数据返回的持续时间可能变为0或可能根本没有设置，在这种情况下，我需要避免在屏幕上显示它。因此，我需要在row类内部使用if / else条件，并且仅在API提供时才显示Duration数据，如何实现呢？我读到JSX不支持if / else，在这种情况下还有什么选择？

      <div className="row">
        //if condition needs to go here
        <div className="__section--left">Duration</div>
        <div className="__section--right border">
            {item.durationHours} Hours
            {item.durationMinutes} Minutes
        </div>
      </div>

Answer 1

您可以使用三元表达式 condition ? ifTrue : ifFalse

所以会是这样的

<div className="row">
  //if condition needs to go here
  { this.state.something === 'something' ?
  <div className="__section--left">Duration</div>
  <div className="__section--right border">
    {item.durationHours} Hours
    {item.durationMinutes} Minutes
  </div>
  : null }
</div>

在上面的代码中，如果条件为true，则返回某个组件，如果条件为false，则不返回任何内容。