javascript：React-限制循环/映射中每行呈现的组件（或列）数

Question

我知道这似乎很容易...但是我不知道如何获得它。因此，任何建议都是值得欢迎的。谢谢。

是）我有的

我正在使用React.js。我有一个数组（假设20个元素）。

我想要的是

我想每行渲染4个元素（例如）。

问题是

我不知道如何限制每行的组件/列数。

这段代码连续呈现所有组件...如何限制它？

populatingLayout() {
    arrayData.map(item => {
        return (
        <div className="FlexRow">
            <div className="FlexColumn">
                <Component dataProp={item} />
            </div>
        </div>
        )
    }
}

render() {
     return (
         <div className="FlexGrid">
             {this.populatingLayout()}
         </div>
    )
}

提前致谢！

Answer 1

我认为您正在寻找类似的东西。假设您的元素是数组中的20个div元素。然后，您可以像这样在单独的行中显示每个四个元素。

class Hello extends React.Component {

constructor(props) {
     super(props);
   }
   
  
//this function will return array of element 20 divs in this case 
multipleElements() {

   let elements = [];
   for(let i = 0; i < 20; i++) {
            elements.push(
                  <div key={i}> element{i+1} </div>
           )
   }
    return elements;
}

//this function will separate each four element to display 
separateElement () { 
 var separateElements = [];
 var multiElements = this.multipleElements();

for(var i = 0; i < multiElements.length; i+=4) {
     var oneRow = [];
     oneRow.push(multiElements.slice(i, i+4).map(item => {
   return <div style={{display: 'inline-block'}}>{item}</div>
}))
separateElements.push(oneRow.map(itm => {return <div>{itm}</div>}))
}
return separateElements;
}
            
          
            
render() {
   return (<div> {this.separateElement()} </div>);
 }
};

ReactDOM.render(
 <Hello/>,
 document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>