reactjs - `setState` 时重新生成多个 dom 标签

Question

class Calendar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: null,
    }
  }

  generate = () => {
    console.log('generate');
    let tags = [];
    for(let i = 0; i<31; i++){
      tags.push(<div key={i} className={this.state.selected === (i+1) ? 'selected' : ''}>{i+1}</div>);
    }
    return tags;
  }

  clickHandle = (e) => {
    this.setState({
      selected: e.target.innerText
    })
  }

  render(){
    return(
      <div onClick={this.clickHandle}>
        {this.generate()}
      </div>
    )
  }
}

当我单击div时，它会调用generate().

我认为这是低效的。

有没有更有效的方法从上面的代码生成多个元素？

健康）状况

1. 当我点击一个div时，它必须得到类selected。

2. 当我单击另一个div时，先前单击div的必须删除该类selected和 1。

标签： reactjsperformance

Answer 1

我在这里发现了两个阻碍预期结果的问题。当你使用来自 DOM 的值时，你总是得到一个字符串。由于您使用的是“===”，因此它永远不会评估为真，因此类名不会改变。

clickHandle = (e) => {
    this.setState({
      selected: parseInt(e.target.innerText, 10)
    })
  }

在使用重复元素时，您还应该使用 key 来提高性能。

generate = () => {
    console.log('generate');
    let tags = [];
    for(let i = 0; i<31; i++){
      tags.push(<div key={'keyname'+i} className={this.state.selected === (i+1) ? 'selected' : ''}>{i+1}</div>);
    }
    return tags;
  }