我使用map方法渲染了所有的图像,我想做的是跟踪当前的图像索引,这样我就可以更改位于另一个div中的项目描述,或者您可以为我提供另一个解决方案。
应用程序. js:
import Carousel from 'react-bootstrap/Carousel';
import './style.css'
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import { useState } from 'react';
function App(props) {
return (
<Container>
<Row>
<Col>
<Carousel className='mycarousel'>
{
props.adem.map((element)=>(
<Carousel.Item key={element.id} id={element.id}>
<img
className="myImage"
src={element.images.url[0]}
alt="First slide"
/>
</Carousel.Item>
))
}
</Carousel>
</Col>
<Col>
</Col>
</Row>
</Container>
);
}
export default App;
正如你所看到的,Map方法渲染图像,但我想显示在一个单独的列,而不是在幻灯片内的项目说明。
1条答案
按热度按时间0qx6xfy61#
您是否尝试过使用Carousel元素的
activeIndex
属性来有条件地呈现描述?您可以通过阅读
activeIndex
属性来获取当前可见卡片的索引,然后检查activeIndex ===卡片索引并呈现相应的描述。希望这对你有帮助