reactjs – 使用React.js在JSX中使用for循环创建HTML

第一个是你从renderTemplates函数返回一个React组件数组.这可能没问题,具体取决于您如何使用输出.要记住的关键是组件的render函数的返回值必须是单个React组件(例如,如果将此结果包装在另一个JSX标记中,那么你没问题.)

其次,您似乎没有让数据从顶层组件流下来;特别是,您不使用Row组件将数据传递给Column组件.这使得编写循环变得如此困难.您只需将单行所需的数据传递给Row组件,而不是尝试管理行和列.然后,Row组件将每个数据传递给Column组件.这消除了处理打开和关闭标签的需要,并简化了整体代码.

以下是我所描述的示例实现.我使用与表相关的标签进行渲染,但您可以使用div或任何最适合您的标签.在撰写本文时,关于模板中的内容的信息并不多,所以我创建了一个愚蠢的小例子.

var KvpColumn = React.createClass({
    render: function() {
        return <td>{this.props.kvp.key}: {this.props.kvp.value}</td>;
    }
});

var KvpRow = React.createClass({
    render: function() {
        return (
            <tr>
            {this.props.items.map(function(item) {
                return <KvpColumn key={item.key} kvp={item}/>;
            })}
            </tr>
        );
    }
});

var ObjectIDsTable = React.createClass({
    render: function() {
        var templates = this.props.templates;

        var propertyNames = Object.getOwnPropertyNames(templates);
        var group = [];
        var rows = [];
        var cols = Number(this.props.cols) || 2;

        for(var i = 0; i < propertyNames.length; i++) {
            var key = propertyNames[i];

            group.push({key: key,value: templates[key]});
            if(group.length === cols) {
                rows.push(<KvpRow key={group[0].key} items={group}/>);
                group = [];
            }
        }

        if(group.length > 0) { // catch any leftovers
            rows.push(<KvpRow key={group[0].key} items={group}/>);
        }

        return <table>{rows}</table>;
    }
});    

// something silly as a simple example
var templates = { a: 'b',c: 'd',e: 'f',g: 'h',i: 'j' };    
React.render(<ObjectIDsTable templates={templates} cols="2"/>,document.getElementById('app'));

如果您可以访问Underscore或lodash,则可以进一步简化ObjectIDsTable中的逻辑(并避免完全编写循环！)：

var ObjectIDsTable = React.createClass({
    render: function() {
        var templates = this.props.templates;

        var rows = _.chain(Object.getOwnPropertyNames(templates))
            .map(function(key) { return { key: key,value: templates[key] }; })
            .chunk(this.props.cols || 2)
            .map(function(group) { return <KvpRow key={group[0].key} items={group}/>; })
            .value();

        return <table>{rows}</table>;
    }
});

你可以在Plunker上看到这个.