Javascript 减少react的jsx中的条件检查 {！加载&&（广告状态！='active'&&ad.status！=='paid'）&& 显示基于未激活和未支付的内容 } {！正在加载（&ad.status==='PAYED'&&display content base on PAYED} {！正在加载和&ad.status==='active'&&display content base on active}

我有3个以上的条件和3个不同的html块，上面的代码只是工作，但我觉得

！加载

声明太容易重复，如何改进上面的代码

---

！必须加载

，因为我不想在API获取挂起之前显示任何内容。

考虑拆分为它自己的组件/函数，然后执行以下操作：

{!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>}

if（加载）{
返回null；
}
{（广告状态！=='active'和广告状态！=='paid'）&&
显示基于未激活和未支付的内容
}
{ad.status==='paid'&显示基于paid的内容}
{ad.status==='active'&基于active显示内容（&D）}

我将创建如下函数：

if (loading) {
    return null;
}

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

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

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

我真的很喜欢这样：

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

constbasecomponent=（）=>(
这是您最常见的情况（蓝天场景）
);
//将特殊情况添加为分支
常量FinalComponent=合成(
分支（（{loading}）=>loading，renderNothing）），
分支（{ad}=>ad.paid，renderComponent（PaidContent）），
分支（（{ad}）=>！ad.active，renderComponent（InactiveContent）），
)（基本组件）

我可能混淆了哪种情况是你的正常情况，哪种情况是例外情况。但这让你知道它是如何工作的

在我们的项目中，我们的基本组件从不包括加载和边缘情况。这使得普通案例代码更易于阅读

---

注意：

分支

调用的顺序很重要。

使用一个函数，然后使用一个

！加载

条件，并在满足其中一个条件时返回所需的任何内容。

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

const BaseComponent = ()=>(
  <div>this is your most common case (blue sky scenario)</div>
);

// add special cases as branches
const FinalComponent = compose(
    branch(({loading}) => loading, renderNothing)),
    branch(({ad}) => ad.paid, renderComponent(PaidContent))),
    branch(({ad}) => !ad.active, renderComponent(InactiveContent))),
)(BaseComponent)