在 reactjs 中渲染轮播

Question

我有一个 json 模式，根据这个模式我想显示 slider/carousel，所以如果 json 模式有 3 个对象，我想渲染 Slider 3 次在 ReactJS 组件和该对象数组中的图像以及滑块/轮播中。

假设我的 json 中有 3 个对象，那么这个 Carousel 应该渲染 3 次

import APIData from "../../data/api.json";
            <Carousel {...settings}>
              {APIData.map((data, index) => {
                data.images.map((images, index) => {
                  return <img key={index} src={images} alt={index} />;
                });
              })}
            </Carousel>

我需要映射多少次，我该怎么做？

api.json

[
  {
    "id": "DR001",
    "propertyFullName": "8838, Brook St, NY",
    "propertyShortName": "Anchorage, AK 99501",
    "features": ["2 beds", "1 bath", "865 sqft"],
    "description": "data.",
    "images": [
      "http://placehold.it/1000x400/ffffff/c0392b/&text=slide1",
      "http://placehold.it/1000x400/ffffff/c0392b/&text=slide2",
      "http://placehold.it/1000x400/ffffff/c0392b/&text=slide3",
      "http://placehold.it/1000x400/ffffff/c0392b/&text=slide4",
      "http://placehold.it/1000x400/ffffff/c0392b/&text=slide5",
      "http://placehold.it/1000x400/ffffff/c0392b/&text=slide6"
    ],
    "status": true
  },
  {
    "id": "DR002",
    "propertyFullName": "8838, Brook St, NY",
    "propertyShortName": "Anchorage, AK 99501",
    "features": ["2 beds", "1 bath", "865 sqft"],
    "description": "data.",
    "images": [
      "http://placehold.it/1000x400/ffffff/c0392b/&text=slide1",
      "http://placehold.it/1000x400/ffffff/c0392b/&text=slide2",
      "http://placehold.it/1000x400/ffffff/c0392b/&text=slide3",
      "http://placehold.it/1000x400/ffffff/c0392b/&text=slide4",
      "http://placehold.it/1000x400/ffffff/c0392b/&text=slide5",
      "http://placehold.it/1000x400/ffffff/c0392b/&text=slide6"
    ]
  }
]

Answer 1

遍历每个 APIData 项目和 return carousel with images

     {
      APIData.map((data, index) => {
        return (
           <Carousel {...settings}>
             {data.images.map((images, index) => {
                return <img key={index} src={images} alt={index} />;
             });}
           </Carousel>
        )
      })
     }

Answer 2

import React from "react";
import APIData from "../../data/api.json";
import Carousel from '....';

export default class SimpleSlider extends React.Component {

    sliders(){
       return APIData.map(({id,images}) => {
        return (
           <Carousel {...settings} key={id}>
             {images.map(({image}) => {
                return <img key={image} src={image} alt={image}/>;
             });}
           </Carousel>
        )
      })
    }

    render() {
      return (
       {this.sliders()}
      );
   }
}

Answer 3

我们的APIData是对象数组，对象结构是这样的

{
  "id": "DR001",
  ... fields,
  "images": [
    "http://placehold.it/1000x400/ffffff/c0392b/&text=slide1",
    "http://placehold.it/1000x400/ffffff/c0392b/&text=slide2"
  ],
}

我们需要用 Carousel 组件包装每个对象，所以首先我们用 Array.map 遍历 APIData 数组，每次迭代都会给我们一个 object，然后我们遍历该对象内部的 images 数组，并为数组中的每个图像渲染一个带有图像源的 img 标签。

// If all what we are doing is returning something from an arrow function
// we can omit the return statement and the {} and just wrap it in () or not wrap it
// at all but with () it is more readable
APIData.map(data => (
  <Carousel key={data.id} {...settings}>
    {data.images.map(imgSrc => (
      <img key={imgSrc} src={imgSrc} alt={data.propertyFullName} />
    ))}
  </Carousel>
));

要查看 map 在做什么，您可以执行此代码。

APIData.map((data, index) => {
  console.log(`Outer map iteration number ${index + 1}`);
  console.log('Outer map data', data);
  console.log('Inner map within the outer map');
  data.images.map(img => {
    console.log(img);
  });
});

在 reactjs 中渲染轮播

Rendering carousels in reactjs

javascript

reactjs

create-react-app