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