如何将图像动态渲染到 React Carousel？

Question

我正在尝试将图像加载到 React Carousel 中。当我 .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>
        })
    )
}