Question

我有一个条件类，当为true时应该返回类名，即使返回true也不返回。（我相信）这是由于我正在使用40000个单位的巨大数组来绘制图形。

Fiddle

在小提琴中，我希望在单击时将类添加到框100、101和102。这应该改变颜色。

此方法是另一种question的后续方法，该方法在理论上有效，但由于数组大小而在实践中无效。我知道有这么大的数组渲染这样的网格是荒谬的，但是我投资了并且想要解决这个问题。（但我愿意接受其他建议）

我希望下面将类添加到40000图形的某些实例中。当i匹配时，应更改颜色的框的数组。

i在渲染图形时遍历1...40000。

let indexes = [100,101,102]

<div className={'box ${indexes.includes(i) ? 'background-color' : 'null'}'}>

typeof(indexes.includes(i))将为布尔值。

我可以看到返回了true，但是没有添加该类。但是，如果我尝试使用较小的数组，则它可以工作，因此似乎是时间问题。 setTimeout在这里不起作用，并导致重新渲染完全失败。

预期输出应为document.querySelector('.box-container:nth-of-type(100')，101、102：

<div className='box background-color'></div>

但这是：

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

Answer 1

下面是一个有效的示例，其中包含一些其他“最佳实践”和更正，这些使您的代码更具性能和可读性...

https://jsfiddle.net/cantuket3/3cs7abyg/9/

（糟糕，最初我是无意中提供了一个指向您的示例的链接。此方法有效）

（此外，我删除了一分钟前的内联代码段。编辑器产生的格式完全难以辨认。请参阅上面的jsFiddle。）

您应该将尽可能多的逻辑移出渲染函数，因为每次React检测到状态更改（修改UI）时，它将再次运行渲染函数。此外，使您的代码更具模块化和可读性...

render(){
    return(
   this.props.toRender.map(num => {
       return  <React.Fragment key={Math.random()}>
       
              {this.renderBoxes(num)}
            </React.Fragment>
        
        })    
        )
 }

TO

render(){
   	if (this.props.toRender && this.props.toRender.length) {
     return(
          <React.Fragment>
              {this.renderBoxes()}
          </React.Fragment>
      )       
     } else {
      return (
        <div>
          No Boxes yet!
        </div>
			)
		}
}

如果您要定义此数组命令，则这是不必要的。只需直接放入元素...

    arr.push(100)
    arr.push(101)
    arr.push(102)
    this.setState({
       classesToAdd: arr
    })

TO

this.setState({
    classesToAdd: [10,11,12]
})

React仅在存在一系列同级元素时才需要一个“键”，因此它可以优化更改检测。

<button key={Math.random()} onClick={this.updateState.bind(this)}>Add Classes</button>

TO

<button onClick={this.clickToAdd.bind(this)}>Add Class</button>

为什么条件类逻辑中的三元不能提供正确的值？

1 个答案: