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

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

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

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

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

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

:

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

 3  使用变量

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 使用函数 

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()}
}