Javascript React中记录数固定的多行_Javascript_Jquery_Arrays_Reactjs

Javascript React中记录数固定的多行

javascript jquery arrays reactjs

Javascript React中记录数固定的多行,javascript,jquery,arrays,reactjs,Javascript,Jquery,Arrays,Reactjs,我在localstorage中有9条产品图像记录，现在我想像gallary view那样显示这些图像。我使用table和map数组来显示图像，并应用array.slice（0，length），这样所有的记录都将被提取出来，但所有的图像将只显示在一行中。我想在每行显示固定数量的图像，即每行有5条这样的记录 {this.state.productdata.slice(0,this.state.productdata.length).map((item, index) => (

我在localstorage中有9条产品图像记录，现在我想像gallary view那样显示这些图像。我使用table和map数组来显示图像，并应用

array.slice（0，length）

，这样所有的记录都将被提取出来，但所有的图像将只显示在一行中。我想在每行显示固定数量的图像，即每行有5条这样的记录

      {this.state.productdata.slice(0,this.state.productdata.length).map((item, index) => (
          <td>                                                                                                                            
             <div className="row" >                                                                                                             
            <div className="card">
              <div class="cardbody">
            <img src={item.productimage} onClick={this.MoreViewHandle.bind(this,item.productid)} height="250px" width="150px"></img>
            </div></div></div>
            </td>

        ))}
       </tr>   

      </table>

      {this.state.productdata.slice(0,this.state.productdata.length).map((item, index) => (
          <td>                                                                                                                            
             <div className="row" >                                                                                                             
            <div className="card">
              <div class="cardbody">
            <img src={item.productimage} onClick={this.MoreViewHandle.bind(this,item.productid)} height="250px" width="150px"></img>
            </div></div></div>
            </td>

        ))}
       </tr>   

      </table>

{this.state.productdata.slice（0，this.state.productdata.length）.map（（项，索引）=>(
))}

我希望每行的记录数相同。与第一行显示前5条记录一样，第二行显示6-10条记录，依此类推。

使用CSS网格：

      {this.state.productdata.slice(0,this.state.productdata.length).map((item, index) => (
          <td>                                                                                                                            
             <div className="row" >                                                                                                             
            <div className="card">
              <div class="cardbody">
            <img src={item.productimage} onClick={this.MoreViewHandle.bind(this,item.productid)} height="250px" width="150px"></img>
            </div></div></div>
            </td>

        ))}
       </tr>   

      </table>

.row {
  display: grid;
  // creates a row of items that are dynamically sized (1fr, fr === free space)
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto;
  // adds gutters to rows and columns, grid gaps can be added to each individually, also
  grid-gap: 16px;
}

例如：

      {this.state.productdata.slice(0,this.state.productdata.length).map((item, index) => (
          <td>                                                                                                                            
             <div className="row" >                                                                                                             
            <div className="card">
              <div class="cardbody">
            <img src={item.productimage} onClick={this.MoreViewHandle.bind(this,item.productid)} height="250px" width="150px"></img>
            </div></div></div>
            </td>

        ))}
       </tr>   

      </table>

在此处了解更多信息：

使用CSS网格：

      {this.state.productdata.slice(0,this.state.productdata.length).map((item, index) => (
          <td>                                                                                                                            
             <div className="row" >                                                                                                             
            <div className="card">
              <div class="cardbody">
            <img src={item.productimage} onClick={this.MoreViewHandle.bind(this,item.productid)} height="250px" width="150px"></img>
            </div></div></div>
            </td>

        ))}
       </tr>   

      </table>

.row {
  display: grid;
  // creates a row of items that are dynamically sized (1fr, fr === free space)
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto;
  // adds gutters to rows and columns, grid gaps can be added to each individually, also
  grid-gap: 16px;
}

例如：

      {this.state.productdata.slice(0,this.state.productdata.length).map((item, index) => (
          <td>                                                                                                                            
             <div className="row" >                                                                                                             
            <div className="card">
              <div class="cardbody">
            <img src={item.productimage} onClick={this.MoreViewHandle.bind(this,item.productid)} height="250px" width="150px"></img>
            </div></div></div>
            </td>

        ))}
       </tr>   

      </table>

在此处了解更多信息：

      {this.state.productdata.slice(0,this.state.productdata.length).map((item, index) => (
          <td>                                                                                                                            
             <div className="row" >                                                                                                             
            <div className="card">
              <div class="cardbody">
            <img src={item.productimage} onClick={this.MoreViewHandle.bind(this,item.productid)} height="250px" width="150px"></img>
            </div></div></div>
            </td>

        ))}
       </tr>   

      </table>

.row{
显示器：flex；
调整内容：灵活启动；
柔性包装：包装；
}
.卡片{
宽度：250px；
高度：150像素
}
.row img{
对象匹配：覆盖；
宽度：100%；
}

.row{
显示器：flex；
调整内容：灵活启动；
柔性包装：包装；
}
.卡片{
宽度：250px；
高度：150像素
}
.row img{
对象匹配：覆盖；
宽度：100%；
}

在您的

中添加此“img gallery”类，如下

然后在下面添加

CSS

      {this.state.productdata.slice(0,this.state.productdata.length).map((item, index) => (
          <td>                                                                                                                            
             <div className="row" >                                                                                                             
            <div className="card">
              <div class="cardbody">
            <img src={item.productimage} onClick={this.MoreViewHandle.bind(this,item.productid)} height="250px" width="150px"></img>
            </div></div></div>
            </td>

        ))}
       </tr>   

      </table>

table.img-gallery tr{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
table.img-gallery tr td{
  display: block;
  width: 20%;
}

在您的

中添加此“img gallery”类，如下

然后在下面添加

CSS

      {this.state.productdata.slice(0,this.state.productdata.length).map((item, index) => (
          <td>                                                                                                                            
             <div className="row" >                                                                                                             
            <div className="card">
              <div class="cardbody">
            <img src={item.productimage} onClick={this.MoreViewHandle.bind(this,item.productid)} height="250px" width="150px"></img>
            </div></div></div>
            </td>

        ))}
       </tr>   

      </table>

table.img-gallery tr{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
table.img-gallery tr td{
  display: block;
  width: 20%;
}

我应用了这个css，但没有工作。所有记录仍然显示在一行中。您使用的浏览器是什么？您是否在现有CSS的基础上使用此CSS？如果是这样，请删除预先存在的CSS并在其位置使用网格。我正在使用Chrome运行此代码，我正在删除以前的CSS并应用此代码，但仍然不起作用。您可以发布CSS吗？.row.card{display:grid；/*创建一行动态大小的项目（1fr，fr==可用空间）*/网格模板列：repeat（5，1fr）；栅格模板行：自动；/*将檐槽添加到行和列，栅格间距可以单独添加到每个行和列，也*/栅格间距：16px；}img{垂直对齐：中间；边框样式：无；左：15px；显示：栅格；右边距：273px；}我应用了这个css，但没有工作。所有记录仍然显示在一行中。您使用的浏览器是什么？您是否在现有CSS的基础上使用此CSS？如果是这样，请删除预先存在的CSS并在其位置使用网格。我正在使用Chrome运行此代码，我正在删除以前的CSS并应用此代码，但仍然不起作用。您可以发布CSS吗？.row.card{display:grid；/*创建一行动态大小的项目（1fr，fr==可用空间）*/网格模板列：repeat（5，1fr）；网格模板行：自动；/*将檐槽添加到行和列，网格间距可以单独添加到每个行和列，也*/grid gap:16px；}img{垂直对齐：中间；边框样式：无；左：15px；显示：网格；右边距：273px；}不太了解React，但此逻辑将非常有用<代码>如果（索引+1%5==0）{'}。若索引值+1可被5整除，则行将被打断并开始添加

，若（索引值+1==this.state.productdata.length）{'}且索引值+1与数据长度相似，则只添加

。删除代码中

之前的

（结束行）。因为，

（结束行）将通过上述逻辑添加。我了解一点，但不了解一些。您能否提供完整的代码和条件？您的

中是否有父类？然后表中没有任何类名，但Imagecad类位于div.ImageCard{flex direction:row；padding left:15px；margin right:2px；z-index:9；}我已经发布了我的答案。若您不能将类添加到

，只需抓取

的任何父类

并将其放入

CSS

。不太了解React，但此逻辑将非常有用<代码>如果（索引+1%5==0）{'}。若索引值+1可被5整除，则行将被打断并开始添加