React：如何使用 react-image-gallery 将图像从数组显示到轮播中及其缩略图

Question

我正在使用 JSON 将它的缩略图显示在我的图片轮播中，但我在这样做时遇到了问题。

JSON

{
"list": [
{
"RestaurantAttachmentId": "11449",
"RestaurantId": "2384",
"FileName": "classic-hall-ajivasan-banquets.jpg",
"AttachmentType": "3",
"Comments": ""
},
{
"RestaurantAttachmentId": "11449",
"RestaurantId": "2384",
"FileName": "classic-hall-ajivasan-banquets.jpg",
"AttachmentType": "3",
"Comments": ""
}
]
}

JSX

class GalleryMain extends Component {
    render() {
        const images = [
      {
        original: 'http://lorempixel.com/1000/600/nature/1/',
        thumbnail: 'http://lorempixel.com/250/150/nature/1/',
      },
      {
        original: 'http://lorempixel.com/1000/600/nature/2/',
        thumbnail: 'http://lorempixel.com/250/150/nature/2/'
      },
      {
        original: 'http://lorempixel.com/1000/600/nature/3/',
        thumbnail: 'http://lorempixel.com/250/150/nature/3/'
      }
    ]

    return (
      <ImageGallery items={images} />
    );
    }
}

如何通过映射在这里显示我的图片

任何帮助都会很有帮助。

谢谢

Answer 1

由于没有缩略图，我只给出了原图和缩略图。还假设 json 对象名称是 'json'

 class GalleryMain extends Component {
        render() {

        let images=this.props.json.list.map((restaurant)=>{ return {original:restaurant.FileName,thumbnail:restaurant.FileName}})
        return (
          <ImageGallery items={images} />
        );
        }
    }

Answer 2

你可以这样试试

class GalleryMain extends Component {
  constructor(props) {
    super(props);
    this.state = {
      imageList: []
    };
  }

  componentDidMount() {

    for (var { FileName: url } of this.props.banquetImages.list) {
      var newObj = {}
      newObj.original = url;
      newObj.thumbnail = url;
      this.state.imageList.push(newObj)
    }
  }

  render() {

    return (
      <ImageGallery items={this.state.imageList} />
    );
  }
}

React：如何使用 react-image-gallery 将图像从数组显示到轮播中及其缩略图

React : how to display images from array into carousel with its thumbnail on using react-image-gallery

json

thumbnails

carousel

reactjs

JSON

JSX