如何动态渲染图像以响应旋转木马？

Question

我正试着把图像加载到反动旋转木马上。当我通过图像的文件数组.map时，我将所有的图像加载到一个“幻灯片”中，但是我需要将它们加载到不同的幻灯片中。

见(一张幻灯片中的所有四幅图片)：

​

​

需要(请注意底部的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"
    ]
}

Answer 1

您的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>
        })
    )
}