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

我知道这看起来很容易。。。但我不知道怎么才能得到它。因此，任何建议都是值得欢迎的。谢谢

我拥有的

我正在使用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>
    )
}

populationlayout（）{
arrayData.map（项=>{
返回(
)
}
}
render（）{
返回(
{this.populatingLayout（）}
)
}

---

提前感谢！

您可以使用以下样式：

.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>
    )
}

.row{
浮动：左；
位置：相对位置；
宽度：100%；
}
.栏目{
浮动：左；
位置：相对位置；
宽度：25%；
}
render（）{
返回(
map（item=>）；
)
}

---

使用此css，您的行与父元素的宽度相同，列与行的宽度为1/4。

您可以使用以下样式：

.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>
    )
}

.row{
浮动：左；
位置：相对位置；
宽度：100%；
}
.栏目{
浮动：左；
位置：相对位置；
宽度：25%；
}
render（）{
返回(
map（item=>）；
)
}

---

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

我想您正在寻找类似的内容。 假设您的元素是数组中的20个div元素，那么您可以将每四个元素显示在一个单独的行中，如下所示

类Hello扩展了React.Component{
建造师（道具）{
超级（道具）；
}
//在这种情况下，此函数将返回元素20 div的数组
多元素（）{
让元素=[]；
for（设i=0；i<20；i++）{
元素。推(
元素{i+1}
)
}
返回元素；
}
//此功能将分离要显示的每四个元素
separateElement（）{
var分离元素=[]；
var multiElements=this.multipleElements（）；
对于（变量i=0；i{
返回{item}
}))
separateElements.push（oneRow.map（itm=>{return{itm}}））
}
返回单独的元素；
}
render（）{
返回（{this.separateElement（）}）；
}
};
ReactDOM.render(
,
document.getElementById（'容器'）
)；

---

我想你在找这样的东西。 假设您的元素是数组中的20个div元素，那么您可以将每四个元素显示在一个单独的行中，如下所示

类Hello扩展了React.Component{
建造师（道具）{
超级（道具）；
}
//在这种情况下，此函数将返回元素20 div的数组
多元素（）{
让元素=[]；
for（设i=0；i<20；i++）{
元素。推(
元素{i+1}
)
}
返回元素；
}
//此功能将分离要显示的每四个元素
separateElement（）{
var分离元素=[]；
var multiElements=this.multipleElements（）；
对于（变量i=0；i{
返回{item}
}))
separateElements.push（oneRow.map（itm=>{return{itm}}））
}
返回单独的元素；
}
render（）{
返回（{this.separateElement（）}）；
}
};
ReactDOM.render(
,
document.getElementById（'容器'）
)；

您是否考虑过只将数组的前4个值传递到映射中？您好@Shard。对不起，我不明白这一点。我想要的是渲染所有元素（假设20个，但可能是500个）在每行包含4个组件的行中。这是一种网格。啊，我的错误@Dubliner我误读了这个问题不必担心@Shard。我感谢你对这个问题的兴趣。@Dubliner检查我的答案。运行下面的代码段你考虑过只将数组的前4个值传递到映射中吗？嗨@Shard。对不起，我不明白这一点我想要的是渲染所有元素（比如说20个，但可能是500个）在每行包含4个组件的行中。这是一种网格。啊，我的错误@Dubliner我误读了问题不必担心@Shard。我感谢你对这个问题的兴趣。@Dubliner检查我的答案。运行下面的代码段@Alessander。我正在使用flexbox。你认为这可能是你的建议的问题吗？嗨@Dubliner，p到底是什么正在访问此arrayData？您传递此数据的方式可能会影响loopHi@Alessander。我想将其用于几个功能。但是，对于初始功能，数组的每个元素都是一个具有多个属性的对象。我以前使用过（1）一种动态限制它的方法。但我认为它是基于ng repeat…记不太清楚。显然，我需要一种不同的方法来反应。嗨@Alessander。我使用的是flexbox。你认为这可能是你的建议的一个问题吗？嗨@Dubliner，这个arrayData到底传递了什么？你传递这些数据的方式会影响你的loopHi@Aless我想用它来实现几个功能。但是，对于最初的功能，数组的每个元素都是一个具有多个属性的对象。我以前用过（1）一种动态限制它的方法。但我认为它是基于ng repeat…记不清了。显然，我需要一种不同的反应方法。谢谢@abdul。它起作用了。我需要调整它一点反应能力，但它起作用了。谢谢@abdul。它起作用了。我需要稍微调整一下