2017-08-29 196 views
1

我是React和語義視圖中的新成員。 我有一張表,其中有一行顯示ok,並且綠色複選標記爲{this.props.email.success},並返回true。否則將其更改爲紅色刪除圖標。 這裏是我的代碼: 語義UI代碼:用javascript更改圖標標記

<Table.Cell> 
    <Icon color="green" name="checkmark" size="large" /> 
    {this.props.email.success} 
</Table.Cell> 

現在是基於成功的價值Iconnamecolor應該改變。 我該怎麼做? 感謝您的幫助。

回答

2

大概是這樣的:

<Icon color={this.props.email.success ? "green" : "red"} name="checkmark" size="large" /> 

編輯

感謝@D勞瑟如果你想改變比圖標的只是顏色更你可以做這樣的事情:

let icon = (this.props.email.success) ? <Icon color...> : <Icon color...>; 
return (<Table.cell>{icon}</Table.cell>); 
+1

雖然聽起來像其他圖標,所以可能更像: 'let icon =(this.props.email.success)? <圖標顏色...>:<圖標顏色...>; {icon}' 或者可能創建一個帶有顏色和名稱屬性的圖標對象並構建條件以填充其值。 –

+1

那麼,我不知道'成功'是什麼,但我猜它是布爾型的。是的,你可以創建兩個對象(一個用於成功,一個用於失敗),但這通常應該是可行的,並且是我能想象的最清潔的方式。 – Nocebo

+0

對不起,你的方式很乾淨我說這聽起來像是他們真的需要一個問題不同的圖標完全不只是顏色。在進一步思考時,我可能會傾向於創建一個對象,並使用它來根據布爾響應填充Icon元素。 –