使用 React / JSX 对可变数量的元素进行分组

Question

我有一种情况，数组中的对象数量可变，我需要创建三个一组。我知道要遍历一个数组我可以做这样的事情 (Fiddle - https://jsfiddle.net/o5pbttjq/):

render: function() {
    var random = Array.apply(null, Array((Math.floor(Math.random() * (15 - 1) + 1) + 1))).map(Number.prototype.valueOf,0).map(function(d,i) {return i});

    return (
        <div>
            {random.map(function(d) {
                return <p>{d}</p>
            })}
        </div>
    );
}

我也可以这样分组，但是很难看(Fiddle - https://jsfiddle.net/Lxqm3tzo/):

render: function() {
    var random = Array.apply(null, Array((Math.floor(Math.random() * (15 - 1) + 1) + 1))).map(Number.prototype.valueOf,0).map(function(d,i) {return i});

    var content = "<div>";

    random.forEach(function(d, i) {
        if (i % 3 === 0 && i !== 0) {
          content += "</div><div>"
        }
        content += "<p>" + d + "</p>"
    })
    content += "</div>"
    return (
        <div dangerouslySetInnerHTML={{__html: content}}></div>
    );
}

如何使用 JSX 创建可变数量的对象组？

Answer 1

以下内容无需设置 innerHTML 即可工作。请参阅此处的 fiddle：https://jsfiddle.net/kuvvd513/8/

var Hello = React.createClass({
    render: function() {
        var random = Array.apply(null, Array((Math.floor(Math.random() * (15 - 1) + 1) + 1))).map(Number.prototype.valueOf,0).map(function(d,i) {return i});

        var allGroups = [];
        var group = [];
        random.forEach(function(d, i) {    
            if (i % 3 === 0 && i !== 0) {
                 allGroups.push(<div> {group} </div>);        
                 group = [];
            }
            group.push(<p> {d} </p>);
        }.bind(this));
        allGroups.push(<div> {group} </div>);

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

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

使用 React / JSX 对可变数量的元素进行分组

Grouping variable number of elements with React / JSX

reactjs

react-jsx