javascript - 如何在reactjs中按日期排列图像？

Question

如何根据块中的日期排列图像？它应该显示具有特定日期的图像，其中块和日期作为每个块的标题。

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

      ]
    }

    renderImages = () => {
      let photoIndex = -1;
      const { images } = this.state;

    return images.map(imageSrc => {
      photoIndex++;
      const privateKey = photoIndex;
      return (
        <MDBCol md="4" key={photoIndex}>
            <p style={{marginBottom:"5px"}}> {imageSrc.mdate}</p> 
          <figure>
            <img src={imageSrc.path} alt="Gallery" className="img-fluid" onClick={()=>
            this.setState({ photoIndex: privateKey, isOpen: true })
            }
            />
          </figure>
        </MDBCol>
        );
      })
    }

    render() {
      return (
          <MDBContainer className="mt-5">
            <div className="mdb-lightbox no-margin">
              <MDBRow>
                {this.renderImages()}
              </MDBRow>
            </div>

          </MDBContainer>
        );
      }
    }
    export default App;

当前输出为：

显示该特定日期的图像。日期作为标题和该日期的相关图像，它应显示在其下方。

标签： javascriptreactjs