Question

我从API获取JSON数据，然后需要在react组件中显示它。我需要使用if / else条件。对于前者JSON数据返回的持续时间可能会变为0或者根本不会设置，在这种情况下，我需要避免在屏幕上显示它。所以我需要在行类中使用if / else条件，并且只有在API提供时才显示持续时间数据，我该如何实现？我读到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>

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

在JSX中反应if / else

1 个答案: