html组件的jsx循环包装器条件答案

【问题标题】：jsx loop wrapper for html component on conditionhtml组件的jsx循环包装器条件
【发布时间】：2015-11-22 16:08:22
【问题描述】：

我想用 div 包装一个 ReactJS 组件，但我只想每 5 个项目包装一个元素。我已经设法 (with little help) 每 5 个项目添加换行符。

代码如下：

var Item = React.createClass({
    render: function() {
        return <span> {this.props.num}</span>;
    }
});

var Hello = React.createClass({
    render: function() {
        var items = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19 ];

        return <div>{items.map(function (i,index) {
            if (index % 5 === 0) {
                return [ <br />, <Item key={i} num={i} /> ];
            }

            return <Item key={i} num={i} />;
        })}</div>;
    }
});

ReactDOM.render(
    <Hello name="World" />,
    document.getElementById('container')
);

这是JSFIDDLE

我还是想用.map函数循环数组，更方便直观。

问题是我如何用 <div> 而不是 <br> 每 5 行包装它？

抱歉，这里有一个解释：想要：

<div>0 1 2 3 4</div>
<div>5 6 7 8 9</div>

我有什么：

0 1 2 3 4 <br />
5 6 7 8 9 <br />

【问题讨论】：

有什么问题？
我想用 div 包装一个 ReactJS 组件，但我只想每 5 个项目包装一个元素。我该怎么做？
我还是不明白。也许期望与实际的输出结构会有所帮助。
那个小提琴似乎在工作
对不起，我添加了示例

标签： javascript loops reactjs react-jsx

【解决方案1】：

Check out this JSFiddle. 它将输入数组分成五个批次，并将每个批次包装在div 中。这些divs--每个都有五个Item 组件作为子组件--都包裹在另一个div 中，即returned。

这是render 函数：

render: function() {
    var items = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21 ];
    var fives = [];
    while(items.length) {
        fives.push(items.splice(0, 5));
    }
    return (
        <div>
            {fives.map(function (five, index) {
                return (
                    <div key={index}>
                        {five.map(function (item, index) {
                            return (<Item key={index} num={item} />);
                        })}
                    </div>
                );
            })}
        </div>
    );
}

【讨论】：

聪明的解决方案！