reactjs визуализировать строки динамически

Question

Я пытаюсь создать компонент, который будет отображать 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; 

Answer 1

Боюсь, что нет декларативного способа сделать это - вам придется разрезать ваш projectData.projects массив с Array.slice() в то для каждого вновь созданного выходного массива < div className = "row" > /*map the chunk of array like you already do*/</div>

Answer 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;