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元素。然后你可以像这样在一个单独的行中显示每个元素。

＆＃13;

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')
);

＆＃13;

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

＆＃13;

Answer 2

您可以使用样式：

.row {
  float: left;
  position: relative;
  width: 100%;
}

.column {
  float: left;
  position: relative;
  width: 25%;
}

render() {
     return (
         <div className="FlexGrid">
             <div className="row">
                 arrayData.map(item => <div className="FlexColumn"><Component dataProp={item} /></div>);
             </div>
         </div>
    )
}

使用这个css，你的行将是父元素的整个宽度，你的列将是你行的1/4宽度。

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

2 个答案: