循环内组件的单个实例上的条件类

Question

我有一个组成网格的组件循环，我希望某些实例通过添加一个类来触发背景颜色更改。

This 问题给了我一些想法，但我还没有让它们发挥作用。

我有这个基本的标记。

   <div className={`box ${(this.state.backgroundColor ? 'backgroundColor' : null)}`} key={i}>
  </div>

我有一个索引数组，表示我希望更改颜色的组件实例

let indexes = [101, 178, 232, 545]

目前我正在通过document.querySelector('.box:nth-of-type(101') 使用纯 JS 进行此操作，但由于此方法绕过了 React，我想更改它。

基于另一个问题，我尝试创建一个包含所有组件的数组并将其设置为状态，然后循环并使用索引。我不知道如何像这样“访问”组件并获取$$typeof: Symbol(react.element) etc

   let compArr = []
    this.arr.map((i) => {
        compArr.push(
            <div className={`box ${(this.state.backgroundColor ? 'backgroundColor' : null)}`} key={i}>
            </div>
        )
    })
    this.setState({
        compArr: compArr
    })  

然后循环遍历索引：

indexes.map(index => {
    this.state.compArr[index] ===> ??stuck here??
})

预期输出：所以在一个包含三个实例的数组上，假设我希望第二个实例只有 backgroundColor 的类：

<div className='box' </div>
<div className='box backgroundColor'</div>
<div className='box'</div>

仅在我的情况下，我希望实例与 indexes 数组相关

在数组中的那些实例中，如何将条件类设置为true？假设我总共有 500 多个实例。

Answer 1

如果我对您的理解正确，这可能就是您正在寻找的...

let indexes = [101, 178, 232, 545]

let compArr = this.arr.map((obj, i) => {
    return (
        <div 
          className={`box${( indexes.includes(i) ? " backgroundColor" : "")}`} 
          key={i}
        >
        </div>
    );
})
this.setState({
    compArr: compArr
})  

如果您的目标是仅为this.arr 中的每个元素返回className backgroundColor 的给定div，并且其索引包含在indexes 数组中，那么...

1. 您只需对数组进行一次迭代，就可以分两次执行当前正在执行的所有必要逻辑。
2. 在使用任何纯函数（如 map() or reduce()）时，您无需将 Array.push() 用于外部收集器，因为它们会返回任何被迭代的数组的新版本。
3. 如果出于某种原因您想要一个不同的 <div>s 数组并在 indexes 中使用索引，那么您应该使用 reduce...

let compArr = this.arr.reduce((acc, obj, i) => {
    if (!indexes.includes(i)) return acc;
    return [ 
       ...acc,
       <div className="box backgroundColor" key={i}></div>
    )]
},[])