根據條件是否反應更改文本顏色

Question

我想使用類似於getElementById的東西來選擇我的元素並更改文本顏色。我目前有一個無序列表，並希望根據if條件改變每個人的顏色。

<div style={styles.passwordRules}> 
    <ul style={styles.listOne}> 
    <li style={styles.li}><span style={styles.error} id="test">8 a 16 caratteri</span></li> 
    <li style={styles.li}><span style={styles.fontNormal}>Carattere maiuscolo</span></li> 
    </ul> 
    <ul style={styles.listTwo}> 
    <li style={styles.li}><span style={styles.fontNormal}>Un numero</span></li> 
    <li style={styles.li}><span style={styles.fontNormal}>Carattere minuscolo</span></li> 
    </ul> 
    <ul style={styles.listThree}> 
    <li style={styles.li}><span style={styles.fontLink}>Nessuna informazione personale</span></li> 
    </ul> 
</div> 

意思就是說比如我想類似這樣的東西：

if(text === 'foo') { 
//change colour to grey 
} 

請注意，我不能用getElementById

Answer 1

爲什麼沒有做這樣的事情：

<li className={text === 'foo' ? styles.class1 : styles.class2 } .../> 

Answer 2

你可以做到這一點，例如e。使用：

<li style={text ==== 'foo' ? _.extend(styles.style, styles.styleFoo) : styles.style }> 

，或者使用ES6

<li style={text === 'fooo' ? Object.assign({}, styles.style, styles.styleFoo) : styles.style }> 

Answer 3

從卡爾·愛德華茲的回答則分支，如果它只是你想改變顏色，這應該做的伎倆：

<li style={{color: text === "foo" ? "trueColor" : "falseColor"}} ... />