在 JSX 中响应 if/else

Question

我正在从 API 获取 JSON 数据，然后需要在反应组件中显示它。我需要使用 if/else 条件。例如。 JSON 数据返回的持续时间可能是 0，或者根本没有设置，在这种情况下，我需要避免在屏幕上显示它。因此，我需要在行类中设置 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>

在上面的代码中，如果条件为真，则返回一些组件，如果为假，则不返回任何内容。