javascript - 减少 react 的jsx中的条件检查

Question

{!loading && (ad.status !== 'active' && ad.status !== 'paid') && <div>
  display something base on not active and not paid
</div>}

{!loading && ad.status === 'paid' && <div>display content base on paid</div>}

{!loading && ad.status === 'active' && <div>display content base on active</div>}

我有以上 3 个条件和 3 个不同的 html block ，上面的代码可以正常工作，但我觉得 !loading 声明太重复了，如何改进上面的代码？

!loading 是必须的，因为我不想在 API 提取挂起之前显示任何内容。

Answer 1

我会创建一个这样的函数:

function getContent(status) {
  switch (status) {
    case 'paid':
      return (<div>display content base on paid</div>);

    case 'active':
      return (<div>display content base on active</div>);

    default:
      return (<div>display something base on not active and not paid</div>);
  }
}

...然后将您的代码块更改为:

{!loading && getContent(ad.status)}