react 中的判断显示

正常比如说我有一个订单状态

我在vue中

可能 orderStatus == 1 已支付 orderStatus == 2 已提交 orderStatus == 3 已下单 orderStatus == 4 已发货

可能有这样的相关的显示一个 tags

可能很简单

复制代码

                                    {/* <el-tag v-if="item?.signatureStatus == 1" size="small" type="primary">未签约</el-tag>
                                    <el-tag v-if="item?.signatureStatus == 2" size="small" type="primary">已提交</el-tag>
                                    <el-tag v-if="item?.signatureStatus == 3" size="small" type="primary">已签约</el-tag> */}

可能就是 v-if。v-else-if。v-else 的使用特别明了特别简单

但是在react 中就不是这样写了

这里面常用的是

1.三元表单式

复制代码

{status === 1 ? (
  <Tag bordered={false} color="default">未签约</Tag>
) : status === 2 ? (
  <Tag bordered={false} color="processing">签约中</Tag>
) : (
  <Tag bordered={false} color="success">已签约</Tag>
)}

2.逻辑与运算符

复制代码

{status === 1 && <Tag bordered={false} color="default">未签约</Tag>}
{status === 2 && <Tag bordered={false} color="processing">签约中</Tag>}
{status === 3 && <Tag bordered={false} color="success">已签约</Tag>}

我认为这个逻辑与运算符比较明了一些吧

3.立即执行函数

复制代码

{(() => {
  if (status === 1) {
    return <Tag bordered={false} color="default">未签约</Tag>
  } else if (status === 2) {
    return <Tag bordered={false} color="processing">签约中</Tag>
  } else {
    return <Tag bordered={false} color="success">已签约</Tag>
  }
})()}

因为这个 if else 不是表达式在这里写的话需要使用函数的形式返回

4.switch case

复制代码

{(() => {
  switch(status) {
    case 1:
      return <Tag bordered={false} color="default">未签约</Tag>
    case 2:
      return <Tag bordered={false} color="processing">签约中</Tag>
    case 3:
      return <Tag bordered={false} color="success">已签约</Tag>
    default:
      return <Tag bordered={false} color="default">未知</Tag>
  }
})()}

这个和 if else 一样的道理

5.使用变量

复制代码

let statusTag
if (status === 1) {
  statusTag = <Tag bordered={false} color="default">未签约</Tag>
} else if (status === 2) {
  statusTag = <Tag bordered={false} color="processing">签约中</Tag>
} else {
  statusTag = <Tag bordered={false} color="success">已签约</Tag>
}

return (
  <div>
    {statusTag}
  </div>
)

也可以定一个变量返回标签毕竟 react 是 jsx 的写法