Javascript ReactJS在图像库中将列动态追加到行中

我正试图在我的网站上用ReactJS中的拖放机制实现媒体galery。当用户删除图像时，我将其保存在数组中，然后遍历数组并动态显示图像。所以我想用bootstrap将图像分为列和行，所以我希望每行有3列，但我的问题是我不能动态附加一行并将图像绑定到那里（例如，当我有4个图像时，我希望3个顶部显示在一行中，最后一个图像显示在新图像中）。有什么解决办法吗？下面是我的代码示例：

<div className="media-gallery">
                    {
                        this.state.files.map((file) => {
                            return (
                                <div key={file.name}>
                                    <div className="col-sm-4">
                                        <figure className= "gallery-thumb">
                                            <img src={file.preview} alt="thumb" className="ro-imgPreview" />
                                            <span className="icon icon-delete"><i className="fa fa-trash"></i></span>
                                        </figure>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>

{
this.state.files.map（（文件）=>{
返回(
)
})
}

上面这是一个组件，然后我在下面调用并渲染了它

<div>
                <div className="account-block">
                    <div className="add-title-tab">
                        <h3>Property media</h3>
                    </div>
                    <div className="add-tab-content">
                        <div className="add-tab-row">
                            <CLMediaGalery store={CLMediaStore} />
                        </div>
                    </div>
                </div>
            </div>

地产媒体

您可以尝试在单独的函数中组合行和列，并在media gallery div的渲染函数中调用该函数：

render(){
  const gallery = this.galleryGrid();
  return (
    <div className="media-gallery container">
      { gallery }
    </div>);
}

render（）{
const gallery=this.galleryGrid（）；
返回(
{画廊}
);
}

和galleryGrid函数：

galleryGrid () {
  const rows = [];
  // Generate the columns for thumbnails
  const thumbs = this.state.files.map((file) => {
      return (
          <div key={file.name} className="col-sm-4">
              <figure className= "gallery-thumb">
                  <img src={file.preview} alt="thumb" className="ro-imgPreview" />
                  <span className="icon icon-delete"><i className="fa fa-trash"></i></span>
              </figure>
          </div>
      )
  });
  // Push a new row for every set of three thumbnails
  for(let row = 0; row < Math.ceil(this.state.files.length / 3); row += 1){
    rows.push(<div key={ `row-${row}` } className="row">
      {
        thumbs.slice(row * 3, 3);
      }
    </div>); 
  };
  // give back an array of our rows composed of columns
  return rows;
}

galleryGrid（）{
常量行=[]；
//为缩略图生成列
const thumbs=this.state.files.map（（文件）=>{
返回(
)
});
//为每组三个缩略图推送一行
for（让row=0；row

---

这将围绕每组3个列div包装一个“row”div

您可以尝试在单独的函数中组合行和列，并在media gallery div的渲染函数中调用该函数：

render(){
  const gallery = this.galleryGrid();
  return (
    <div className="media-gallery container">
      { gallery }
    </div>);
}

render（）{
const gallery=this.galleryGrid（）；
返回(
{画廊}
);
}

和galleryGrid函数：

galleryGrid () {
  const rows = [];
  // Generate the columns for thumbnails
  const thumbs = this.state.files.map((file) => {
      return (
          <div key={file.name} className="col-sm-4">
              <figure className= "gallery-thumb">
                  <img src={file.preview} alt="thumb" className="ro-imgPreview" />
                  <span className="icon icon-delete"><i className="fa fa-trash"></i></span>
              </figure>
          </div>
      )
  });
  // Push a new row for every set of three thumbnails
  for(let row = 0; row < Math.ceil(this.state.files.length / 3); row += 1){
    rows.push(<div key={ `row-${row}` } className="row">
      {
        thumbs.slice(row * 3, 3);
      }
    </div>); 
  };
  // give back an array of our rows composed of columns
  return rows;
}

galleryGrid（）{
常量行=[]；
//为缩略图生成列
const thumbs=this.state.files.map（（文件）=>{
返回(
)
});
//为每组三个缩略图推送一行
for（让row=0；row

---

这将围绕每组3个列div包装一个“row”div

您的

行

引导类在哪里？您可以在

映射

函数中传递

索引

属性，检查该属性，并通过如下操作将className行动态添加到div：className={index%3==0？“行”：“}您的

行

引导类在哪里？您可以在

映射

函数中传递

索引

属性，检查该属性，并通过如下操作将className行动态添加到您的div中：className={index%3==0？“row:“}这是一种很好的方法，但我尝试了，但没有成功，我只得到一行om图像，即使我上传了超过3个，我认为外部div必须有CSS类“container”，看看这个编辑是否有效，这并不能解决问题。浏览器控制台中有错误吗？你能看到生成的HTML结构吗？它看起来正确吗？还有CSS类名吗？还有一件很简单的事情，你导入了引导CSS吗？（参见“样式表”下）是的，我已经导入了引导程序，在borwser上没有任何错误，html元素也是正确的，但是它只显示了一行条件。例如，如果（行%3==0），则根本没有行，但如果（行%3！=0），则显示该行。这是一种很好的方法，但我尝试过，但没有为我工作，我只获得一行om图像，即使我上载了3个以上，我认为外部div必须具有CSS类“container”，请查看此编辑是否有效，这并不能解决问题。浏览器控制台中有错误吗？你能看到生成的HTML结构吗？它看起来正确吗？还有CSS类名吗？还有一件很简单的事情，你导入了引导CSS吗？（参见“样式表”下）是的，我已经导入了引导程序，在borwser上没有任何错误，html元素也是正确的，但是它只显示了一行条件。例如，如果（行%3==0），则根本没有行，但如果（行%3！=0），则显示该行。