[英]React boostrap carousel not working when using array.map function in react
I'm trying to create a simple carousel using react Bootstap but it seems not to work.我正在尝试使用 react Bootstap 创建一个简单的轮播,但它似乎不起作用。 The code below doesn't work
下面的代码不起作用
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>
);
}
but this code works very fine.但这段代码工作得很好。 Is there a way i can make the first code work?
有没有办法让第一个代码工作? Because I have to fetch data in the CarouselItem component for each item before i render it that is why I want to use the first approach.
因为在渲染之前我必须在 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>
);
}
you can find the sandbox code here sandbox code你可以在这里找到沙盒代码沙盒代码
Pretty sure this would work很确定这会起作用
<Carousel>
{[1, 2, 3, 4, 5, 6].map((item) => {
return <Carousel.Item key={item}>{item}</Carousel.Item>;
})}
</Carousel>
In React-Bootstrap docs I cannot find property item
for <Carousel.Item />
, you must pass children instead.在React-Bootstrap 文档中,我找不到
<Carousel.Item />
的属性item
,您必须改为传递子项。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.