reactjs动态渲染行答案

【问题标题】：reactjs render rows dynamicallyreactjs动态渲染行
【发布时间】：2015-07-17 20:27:17
【问题描述】：

我正在尝试创建一个组件，它将连续呈现 3 个项目描述。

我有 2 个组件，一个是创建一个名为 Project 的项目，我在下面附上了另一个项目的代码。

我的主要问题是

1：如何在行开始前插入<div class="row"> 元素
2：如何当行结束时结束一个

此代码正在运行，但所有项目都在一行中呈现。

var React = require('react'),
    projectData = require('./../../projects.json'),
    Project = require('./project'),
    projectLength = projectData.projects.length,
    itemsInRow = 3,
    clicked = 0; //Increment this number and rerender this cimponent on click and we are almost done 


var Projects = React.createClass({

    render: function() {
        var projectsDOM =   < div >
                            < div className = "jumbotron" >
                                < div className = "container" >
                                    < h1 > Projects < /h1> 
                                < /div> 
                            < /div>

                            < div className = "container" >
                                < div className = "row" > 
                                    {projectData.projects.reverse().map(function(project, i) {

                                        if(i < (clicked + 1) * itemsInRow) {
                                            return <Project id={project.id} />
                                        }
                                    })}

                                < /div> 
                                <hr/> 
                            < /div> 
                        < /div>

        return projectsDOM;
    }
});

module.exports = Projects;

【问题讨论】：

标签： reactjs

【解决方案1】：

恐怕没有声明性的方法可以做到这一点 - 你必须用 Array.slice() 分割你的 projectData.projects 数组，然后为每个新创建的数组输出 < div className = "row" > /*map the chunk of array like you already do*/</div>

【讨论】：

【解决方案2】：

jalooc 的回答帮助我朝着正确的方向思考。所以我把创建新行的责任交给了不同的组件，并传递了一个对象数组来渲染。这是我的最终解决方案：

var React = require('react'),
    projectData = require('./../../projects.json'),
    ProjectsRow = require('./projects_row'),
    itemsInRow = 3,
    projects = projectData.projects.reverse();

    var Projects = React.createClass({

        getInitialState: function() {
            return { 
                rows: [projects.splice(0, itemsInRow)]
            }
        },

        loadMoreProjects: function(e) {
            e.preventDefault();
            var addRow = this.state.rows;

            if(projects.length) {
                addRow.push(projects.splice(0, itemsInRow));
                this.setState({rows: addRow});  
            }
        },

        render: function() {

            return (
                < div >
                    < div className = "jumbotron" >
                        < div className = "container" >
                            < h1 > Projects < /h1> 
                        < /div> 
                    < /div>

                    < div className = "container" >

                        {this.state.rows.map(function(row, i) {
                            return <ProjectsRow row={row} key={i} />
                        }.bind(this))}

                    < /div> 

                    < div className = "container" > 
                        <a className="btn btn-default" 
                            onClick = {this.loadMoreProjects}
                            role="button" > Load More </a>
                    </div>
                < /div>
            );  
        }
    });

    module.exports = Projects;

【讨论】：