代码之家 › 专栏 › 技术社区 › TheWebs

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

reactjs javascript

TheWebs · 技术社区 · 5 年前

因此,请考虑以下内容:

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]] 它循环并为前三个键创建分隔符,但不是最后三个键。

我肯定这太复杂了,但我不知道在这里该怎么做。

预期: [[3格],[3格]]
实际情况: [ [ 3个div] ]

1 回复 | 直到 5 年前

TheWebs 5 年前

我假设你想把每行分成3个格。一个更简单的方法将如图所示,即使将来有六个以上的键也能工作。

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

IE 对于键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);
  }
}

推荐文章