[英]Change text colour depending on if condition react
我想使用类似于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
为什么不做这样的事情:
<li className={text === 'foo' ? styles.class1 : styles.class2 } .../>
您可以使用以下方法进行操作:
<li style={text ==== 'foo' ? _.extend(styles.style, styles.styleFoo) : styles.style }>
或者如果使用ES6
<li style={text === 'fooo' ? Object.assign({}, styles.style, styles.styleFoo) : styles.style }>
然后从卡尔·爱德华兹的答案中分出来,如果只是您要更改的颜色,这应该可以解决问题:
<li style={{color: text === "foo" ? "trueColor" : "falseColor"}} ... />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.