繁体   English   中英

使用array.map function 时,React boostrap carousel 不起作用

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM