jsx中如何解决{if…else…}的问题

时间 2019-11-12

标签 jsx 如何解决问题繁體版

原文原文链接

简单短小的判断使用三元表达式，复杂代码较多的使用变量或函数html

1 三元表达式，结果中只有变量函数

{borrowerData.serviceRate ? borrowerData.serviceRate +'%' : ''}

2 三元表达式，结果中有变量和html元素this

{borrowerData.serviceRee ? <td style={{ width: '30%' }}>{toThousands(+borrowerData.serviceRee)}</td>

:

<td style={{ width: '30%' }}></td>}

3 使用变量spa

render () {
  const { borrowerData } = this.props
  let serviceReeStr
  if (borrowerData.serviceRee) {
    serviceReeStr = (
      <td style={{ width: '30%' }}>{toThousands(+borrowerData.serviceRee)}
    {['CLOSE', 'FINISH', 'PREPAYMENT_FINISH', 'OVER_DUE_FINISH', 'OVER_DUE'].map((i) => {
      if (borrowerData.status === i) {
      return (
        <ElectReceipt  number={borrowerData.id} type={2} style={{}}/>
    )
    }
    })}
  </td>
  )
  } else {
    serviceReeStr = (
      <td style={{ width: '30%' }}></td>
  )
  }
    return (
          {serviceReeStr}
    )
}

4 使用函数 htm

serviceReeFunc () {
  const { borrowerData } = this.props

 if (borrowerData.serviceRee) {
    return (
      <td style={{ width: '30%' }}>{toThousands(+borrowerData.serviceRee)}
        {['CLOSE', 'FINISH', 'PREPAYMENT_FINISH', 'OVER_DUE_FINISH', 'OVER_DUE'].map((i) => {
          if (borrowerData.status === i) {
            return (
              <ElectReceipt  number={borrowerData.id} type={2} style={{}}/>
            )
          }
        })}
      </td>
    )
  } else {
    return (
      <td style={{ width: '30%' }}></td>
    )
  }
}

render () {
  {this.serviceReeFunc()}}