根据条件是否反应更改文本颜色答案

【问题标题】：Change text colour depending on if condition react根据条件是否反应更改文本颜色
【发布时间】：2017-04-12 16:45:29
【问题描述】：

我想使用类似于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

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

为什么不做这样的事情：

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

【讨论】：

【解决方案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 }>

【讨论】：

【解决方案3】：

从 Carl Edwards 的答案中分出，如果它只是你想改变的颜色，这应该可以解决问题：

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

【讨论】：