如何在ReactJS中根据数组元素更改按钮颜色

Question

假设我有两个这样的数组：

state = {
firstArr: ['one', 'two', 'three', 'four', 'five'],
secondArr: ['one', 'three', 'four']
}

我有一个按钮列表，如下所示：

{firstArray.map((item, index) => (
<label className="btn btn-secondary" key={index}>
<input type="checkbox" onChange={this.handleAddItem} value={item} /> {item}                              
</label>
))}

如何将不同的背景颜色仅应用于第二个数组中列出的按钮？

Answer 1

根据当前项是否是secondArr的一部分，您需要有这样的条件类。

{firstArray.map((item, index) => (
<label
className={`btn btn-secondary ${secondArr.includes(item) ? 'different-bg-class' : ''}`}
key={index}
>
<input type="checkbox" onChange={this.handleAddItem} value={item} /> {item}                              
</label>
))}