javascript - 如何将图像动态渲染到 React Carousel?
问题描述
我正在尝试将图像加载到 React Carousel 中。当我通过图像的文件路径数组进行映射时,我将所有图像加载到一个“幻灯片”中,但我需要将它们加载到不同的幻灯片中。
看过(一张幻灯片中的所有四张图片):
需要(注意底部的 4 个点,表示 4 张幻灯片。此示例只是硬编码):
这是相关的代码。Item.js 是父级, CarouselImages.js 是要解析的导入函数。这些组件还有很多,但我将它们缩减为必要的部分。
项目.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>
...
轮播图片.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>
})
)
}
推荐阅读
- html - Angular - 如何放置一个对象
在 BehaviorSubject 中 - java - 如何仅记录来自 WebClient 的 POST ant PATCH 请求
- css - 如何使用 CSS(在 Firefox 中)仅隐藏垂直滚动条?
- reactjs - 我的数据测试 ID 在那里,但我的测试找不到它反应酶开玩笑单元测试
- swiftui - 如何在 macOS 上更改禁用的 SwiftUI TextField 的背景和前景色
- java - 如何在java中从s3获取触发lambda的文件名
- c - 从 Windows 10 微过滤器驱动程序中的注册表读取
- c++ - 为什么 views::reverse 可以将 non-sized_range 转换为 size_range?
- python - 如何在 MSYS2 (Windows 10) 中安装 PyQtWebEngine
- kubernetes - 重新安装 minikube 时 minikube 和 nginx 入口出现问题