[英]React boostrap carousel not working when using array.map function in react
我正在尝试使用 react Bootstap 创建一个简单的轮播,但它似乎不起作用。 下面的代码不起作用
function CarouselItem({ item }) {
return (
<Carousel.Item>
<img
className="d-block w-100"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQom33pPRha3xPSmmGVI5zaqSiraDxb_KuMKvmIOnfQb3rbHZZKJ8wxRGttgjfDpQ3cKrQ&usqp=CAU"
alt="First slide"
/>
<Carousel.Caption>
<h3>{`${item} slide label`}</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</Carousel.Caption>
</Carousel.Item>
);
}
function App() {
return (
<div className="App">
<Carousel>
{[1, 2, 3, 4, 5, 6].map((item) => {
return <CarouselItem key={item} item={item} />;
})}
</Carousel>
</div>
);
}
但这段代码工作得很好。 有没有办法让第一个代码工作? 因为在渲染之前我必须在 CarouselItem 组件中为每个项目获取数据,这就是我想使用第一种方法的原因。
function App() {
return (
<div className="App">
{/**but this way works**/}
<Carousel>
{[1, 2, 3, 4, 5, 6].map((item) => {
return (
<Carousel.Item>
<img
className="d-block w-100"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQom33pPRha3xPSmmGVI5zaqSiraDxb_KuMKvmIOnfQb3rbHZZKJ8wxRGttgjfDpQ3cKrQ&usqp=CAU"
alt="First slide"
/>
<Carousel.Caption>
<h3>{`${item} slide label`}</h3>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.
</p>
</Carousel.Caption>
</Carousel.Item>
);
})}
</Carousel>
</div>
);
}
你可以在这里找到沙盒代码沙盒代码
很确定这会起作用
<Carousel>
{[1, 2, 3, 4, 5, 6].map((item) => {
return <Carousel.Item key={item}>{item}</Carousel.Item>;
})}
</Carousel>
在React-Bootstrap 文档中,我找不到<Carousel.Item />
的属性item
,您必须改为传递子项。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.