javascript - 循环对象以在React JS中创建引导行

因此，请考虑以下几点：

renderCharacterSheetInfo() {
    let rows = [];
    let elements = [];
    let rowCount = 0;

    if (!this.state.loading) {

      const characterSheet = {
        strength: this.state.characterSheet.base_strength,
        dexterity: this.state.characterSheet.base_dexterity,
        agility: this.state.characterSheet.base_agility,
        intelligence: this.state.characterSheet.base_intelligence,
        health: this.state.characterSheet.base_health,
        gold: this.state.characterSheet.gold,
      };

      for(const key in characterSheet) {
        if (rowCount < 3) {
          elements.push(<div className="col-md-4" key={key}>{characterSheet[key]}</div>);
          rowCount++;
        } else {
          rows.push(elements);
          rowCount = 0;
          elements = [];
          elements.push(<div className="col-md-4" key={key}>{characterSheet[key]}</div>);
        }
      }
    }

    console.log(rows);
  }

我正在尝试做的是遍历characterSheet对象并创建数组rows的数组：[[3 divs], [3 divs]]。

发生的是，在控制台中，[[3 divs]]会循环并为前三个键创建div，但不会为最后三个键创建div。

我确信这太复杂了，但是我不确定在这里做什么。


预期：[[3 divs], [3 divs]]
实际：[[3 divs]]

最佳答案

我假设您想将行分成3个div。如图所示，即使将来有六个以上的键，也可以使用一种更简单的方法。

基本上，您将索引除以3得到第一个索引，然后在该索引处将嵌套数组中的项目推入。

即
对于键0,1,2，索引将为0
对于键3、4、5，索引将为1
等等...

renderCharacterSheetInfo() {
    if (!this.state.loading) {
      const characterSheet = {
        strength: this.state.characterSheet.base_strength,
        dexterity: this.state.characterSheet.base_dexterity,
        agility: this.state.characterSheet.base_agility,
        intelligence: this.state.characterSheet.base_intelligence,
        health: this.state.characterSheet.base_health,
        gold: this.state.characterSheet.gold,
      };

      let rows = Object.keys(characterSheet).reduce((_rows,key,index) => {
        let rowIndex = Math.floor(index/3);
        if(!_rows[rowIndex]) {
            _rows[rowIndex] = []; //initialize with empty to push
        }

        _rows[rowIndex].push(<div className="col-md-4" key={key}>
 {characterSheet[key]} </div>)
        return _rows;
      },[]);

    console.log(rows);
  }
}

关于javascript - 循环对象以在React JS中创建引导行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54603459/