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
})

如果您的目标是仅，则为backgroundColor中的每个元素（其索引包含在this.arr数组中）返回具有className indexes的给定div，然后...

您只需要遍历一次数组即可执行当前正在执行的所有必要逻辑，只需两次即可。
在使用Array.push()之类的任何纯函数时，您无需使用map() or reduce()到外部收集器，因为它们会返回迭代过的数组的新版本。
如果出于任何原因，您想要一个<div>的不同数组，且它们的索引位于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>
    )]
},[])

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

1 个答案: