javascript:React - 限制循环/ map 中每行呈现的组件(或列)数量

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>