ReactJS如何按日期分块排列图片？以日期为块标题

没问题，要实现按日期分块展示图片的效果，核心就是先把你的图片数组按日期分组，然后逐个渲染每个日期块的标题和对应的图片。我帮你修改了代码，你可以直接参考使用：

import React from "react";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
import './App.css';

class App extends React.Component {
  state = {
    photoIndex: 0,
    isOpen: false,
    images: [
      {path: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(117).jpg", mdate: "9 Jul 2019 3:56 pm"},
      {path: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(98).jpg", mdate: "9 Jul 2019 12:14 pm"},
      {path: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(131).jpg", mdate: "9 Jul 2019 12:14 pm"},
      {path: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(123).jpg", mdate: "9 Jul 2019 12:14 pm"},
      {path: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(118).jpg", mdate: "8 Jul 2019 4:49 pm"},
      {path: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(132).jpg", mdate: "8 Jul 2019 4:48 pm"},
      {path: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(132).jpg", mdate: "8 Jul 2019 4:47 pm"},
      {path: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(118).jpg", mdate: "1 Jul 2019 1:51 pm"}
    ]
  }

  // 按日期分组图片的方法
  groupImages = () => {
    const { images } = this.state;
    return images.reduce((groups, image) => {
      // 提取日期部分（去掉时间）
      const date = image.mdate.split(' ').slice(0, 3).join(' ');
      if (!groups[date]) {
        groups[date] = [];
      }
      groups[date].push(image);
      return groups;
    }, {});
  }

  // 渲染一组图片的方法，接收当前组的图片数组
  renderImages = (groupImages) => {
    return groupImages.map((imageSrc, index) => {
      return (
        <MDBCol md="4" key={index}>
          <p style={{marginBottom:"5px"}}> {imageSrc.mdate}</p>
          <figure>
            <img 
              src={imageSrc.path} 
              alt="Gallery" 
              className="img-fluid" 
              onClick={()=> this.setState({ photoIndex: index, isOpen: true }) } 
            />
          </figure>
        </MDBCol>
      );
    })
  }

  render() {
    const groupedImages = this.groupImages();
    // 将分组后的日期转换为数组，方便遍历
    const dates = Object.keys(groupedImages);

    return (
      <MDBContainer className="mt-5">
        <div className="mdb-lightbox no-margin">
          {/* 遍历每个日期块 */}
          {dates.map(date => (
            <div key={date} className="date-block mb-5">
              {/* 日期标题 */}
              <h3 className="mb-3">{date}</h3>
              {/* 渲染该日期的图片 */}
              <MDBRow>
                {this.renderImages(groupedImages[date])}
              </MDBRow>
            </div>
          ))}
        </div>
      </MDBContainer>
    );
  }
}

export default App;

关键修改说明： #

• 新增groupImages方法：使用reduce遍历图片数组，提取每个图片的纯日期部分作为分组键，把同日期的图片归到同一个数组里。
• 改造renderImages方法：让它接收一个图片数组参数，这样可以复用它来渲染任意一组的图片。
• 修改render方法：先获取分组后的图片对象，然后遍历每个日期，先渲染日期标题，再调用renderImages渲染该日期下的所有图片，每个日期块用一个容器包裹，方便样式区分。

你还可以在App.css里给.date-block加一些样式，让每个日期块之间的区分更明显，比如：

.date-block {
  padding: 1rem;
  border-bottom: 1px solid #eee;
}

内容的提问来源于stack exchange，提问作者Vinay