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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM