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()。

我认为效率不高。

是否有更有效的方法从上述代码生成多个元素？

条件

当我单击一个div时，它必须获得类selected。
当我单击另一个div时，先前单击的div必须删除类selected和1。

Answer 1

我在这里发现两个问题，无法达到预期的效果。使用DOM中的值时，始终会得到一个字符串。由于您使用的是'==='，因此它永远不会评估为true，因此className不会更改。

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

Answer 2

您应该给每个div一个unique key。这有助于React仅重新渲染实际已更改的div，而其他未更改的div将仅被重用。

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;

当`setState`时会重新生成多个dom标签。

2 个答案: