React/JSX - 迭代 JSON 对象并在 .row 中嵌套每个 X 项

Question

这一定有一个简单的答案，但我似乎找不到。

JSON：-

{
  1: {
    'desc' : 'desc1',
    'title' : 'title 1',
  },
  2: {
    'desc' : 'desc2',
    'title' : 'title 2',
  },
  3: {
    'desc' : 'desc3',
    'title' : 'title 3',
  },
  4: {
    'desc' : 'desc4',
    'title' : 'title 4',
  },
  5: {
    'desc' : 'desc5',
    'title' : 'title 5',
  },
  6: {
    'desc' : 'desc6',
    'title' : 'title 6',
  },
};

所以基本上我想迭代这个对象并将每 3 个项目嵌套在一个 .row 类 div 中，如下所示：-

<div class='row'>
    <div>desc1 : title1</div>
    <div>desc2 : title2</div>
    <div>desc3 : title3</div>
</div>
<div class='row'>
    <div>desc4 : title4</div>
    <div>desc5 : title5</div>
    <div>desc6 : title6</div>
</div>

现在我明白了如何在组件中简单地渲染（）这个：-

{
    Object.keys(JSONObject).map(key => <TheComponent key={key} details={JSONObject[key]} />)
}

但是，我不知道如何将其拆分为 2 行，每行 3 个项目，并将 3 个项目中的每一个嵌套在 .row div 中。

非常感谢任何帮助。我对 ES6/ReactJS 比较陌生，渴望克服初期的问题。

Answer 1

查看此问题的一种方法是首先将数组拆分为块，然后使用它。

所以你可以得到你的初始数组；

var ar1 = Object.keys(JSONObject);

然后分块

var ar2 = [];
var i, j, chunk = 3;
for (i = 0, j = ar1.length; i < j; i += chunk) {    
    ar2.push(ar1.slice(i, i+chunk));    
}

这将为您提供ar2，它是一个数组数组。然后，您可以循环并输出包含行的第一级数组，然后输出包含内部 html 的第二级数组。

在jsbin 上查看这段基本代码来演示分块

Answer 2

我做了非常相似的事情，所以这是我使用的代码：

let rowCount = 0;
let rows = [];
Object.keys(JSONObject).forEach((k, i) => {
    // this just makes sure there is always an array initialised 
    rows[rowCount] = rows[rowCount] || []; 
    // now we add into the current row a component
    rows[rowCount].push(
        <TheComponent
            key={k}
            details={JSONObject[key]}
        />
    );

    if ((i + 1) % 3 === 0) { // the 3 here is how many items you want per row!!
        // if we can perfectly divide the current position by 3
        // we have filled a row, so now increment the row
        rowCount++;
    }
});

这会给你一个数组数组：

[
    [ <TheComponent key=1 />, <TheComponent key=2 /> <TheComponent key=3 /> ]
    [ <TheComponent key=4 /> ... ]
    [ .... ]
]

然后你可以这样渲染：

render() {
    const rows = this.groupRows(); // this is the function above

    // ar below is a single array of <TheComponent ... /> so looks like:
    // [ <TheComponent ... />, ... ]
    return (
      <div>
        { rows.map((ar, i) => <div className="row"> { ar } </div>) }
      </div>
    );
}

附录

我实际上创建了一个组件来为我做这件事，所以我可以像这样使用它：

render() {
    return (
        <Grouper>
            { Object.keys(JSONObject).map(k => <TheComponent key={k} details={ JSONObject[key] } />) }
        </Grouper>
    );
}

<Grouper /> 组件所做的是React.Children.forEach(...) 使用我上面的代码对它们进行分组。这意味着所有组件脚手架代码都很好地从业务视图逻辑中抽象出来。

Answer 3

 let arrTheComponent = [], arrJson = [];

    Object.keys(JSONObject).map(key => {

        arrJson.push(JSONObject[key]);
        if (arrJson.length === 3) {
            arrTheComponent.push(<TheComponent json={arrJson} />);
            arrJson = [];
        }
    })

显示组件

export const TheComponentList = () => {

    let arrTheComponent = [], arrJson = [];

    Object.keys(JSONObject).map(key => {

        arrJson.push(JSONObject[key]);
        if (arrJson.length === 3) {
            arrTheComponent.push(<TheComponent json={arrJson} />);
            arrJson = [];
        }
    })

    return (<div>
        {arrTheComponent}
    </div>);
}