Изменить цвет текста в зависимости от того, реагирует ли состояние

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

Вы можете сделать это для примера е с помощью:

<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"}} ... />