Блог

Я пытаюсь загрузить изображения в React Carousel. Когда я просматриваю массив путей к файлам для своих изображений, я загружаю все изображения в один «слайд», но мне нужно, чтобы они загружались в разные слайды.

Просмотрено (все четыре картинки на одном слайде):

Требуется (обратите внимание на 4 точки внизу, обозначающие 4 слайда. Этот пример просто жестко запрограммирован):

Вот соответствующий код. Item.js является родителем и CarouselImages.js это импортированная функция для синтаксического анализа. В этих компонентах гораздо больше, но я сократил их до необходимых частей.

Item.js

 import React from 'react';
import Carousel from 'react-elastic-carousel'
import CarouselImages from 'components/DatabaseManager/HelperFunctions/CarouselImages.js'
import {
    Col,
    Row,
    CarouselItem
} from 'reactstrap'


class Item extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            activeContent: "item",
        }
    }
..
    render() {
        return (
            <div>
                <Row>
                    <Col md="6">
                        <Carousel itemsToShow={1}>
                            <CarouselImages data={this.props.data} />
                        </Carousel>
                    </Col>
                </Row>
            </div>
        )
    }
}

export default Item;
  

Жестко запрограммированный Item.js это работает:

 ...
    <Carousel itemsToShow={1}>
        <item><img src={require(`assets/img/phones/i5BlackScreenFront.jpg`)} alt="phone" /></item>
        <item><img src={require(`assets/img/phones/i5BlackScreenBack.jpg`)} alt="phone" /></item>
        <item><img src={require(`assets/img/phones/i5WhiteScreenFront.jpg`)} alt="phone" /></item>
        <item><img src={require(`assets/img/phones/i5WhiteScreenBack.jpg`)} alt="phone" /></item>
    </Carousel>
...
  

CarouselImages.js:

 import React from 'react';

export default function CarouselImages({ data }) {
    return (
        data.photoPath.map((image) => {
            return <item><img src={require(`assets/img/${image}`)} alt="phone" /></item>
        })
    )
}
  

поддержка данных (из вызова API):

 {
    "photoPath": [
        "phones/i5BlackScreenFront.jpg",
        "phones/i5BlackScreenBack.jpg",
        "phones/i5WhiteScreenFront.jpg",
        "phones/i5WhiteScreenBack.jpg"
    ]
}
  

Ваш компонент CarouselImages возвращается как одна группа, поэтому все они отображаются на одном слайде. Если вы хотите разделить его на отдельный компонент, подобный этому, вам следует изменить CarouselImages.js чтобы

 import React from 'react';

export default function CarouselImages({ data }) {
    return (
        <Carousel itemsToShow={1}>
        {data.photoPath.map((image) => {
            return <item><img src={require(`assets/img/${image}`)} alt="phone" /></item>}
        </Carousel>
        })
    )
}