为什么文档上的 reactstrap 轮播代码片段不起作用？

Question

我试过reactstrap carousel。我在它下面复制了一些代码，并尝试在我的代码库中使用它。 Carousel 标签以 UncontrolledCarousel 开头，效果很好。但我不知道为什么这段代码会抛出这个错误。 TypeError: carouselItems.map is not a function 这里我也附上文档中相关的链接carousel

<Carousel
  activeIndex={0}
  next={function noRefCheck(){}}
  previous={function noRefCheck(){}}
  slide={false}
>
  <CarouselIndicators
    activeIndex={0}
    items={[
      {
        altText: 'Slide 1',
        caption: 'Slide 1',
        key: 1,
        src: 'https://picsum.photos/id/123/1200/600'
      },
      {
        altText: 'Slide 2',
        caption: 'Slide 2',
        key: 2,
        src: 'https://picsum.photos/id/456/1200/600'
      },
      {
        altText: 'Slide 3',
        caption: 'Slide 3',
        key: 3,
        src: 'https://picsum.photos/id/678/1200/600'
      }
    ]}
    onClickHandler={function noRefCheck(){}}
  />
  <CarouselItem
    onExited={function noRefCheck(){}}
    onExiting={function noRefCheck(){}}
  >
    <img
      alt="Slide 1"
      src="https://picsum.photos/id/123/1200/600"
    />
    <CarouselCaption
      captionHeader="Slide 1"
      captionText="Slide 1"
    />
  </CarouselItem>
  <CarouselItem
    onExited={function noRefCheck(){}}
    onExiting={function noRefCheck(){}}
  >
    <img
      alt="Slide 2"
      src="https://picsum.photos/id/456/1200/600"
    />
    <CarouselCaption
      captionHeader="Slide 2"
      captionText="Slide 2"
    />
  </CarouselItem>
  <CarouselItem
    onExited={function noRefCheck(){}}
    onExiting={function noRefCheck(){}}
  >
    <img
      alt="Slide 3"
      src="https://picsum.photos/id/678/1200/600"
    />
    <CarouselCaption
      captionHeader="Slide 3"
      captionText="Slide 3"
    />
  </CarouselItem>
  <CarouselControl
    direction="prev"
    directionText="Previous"
    onClickHandler={function noRefCheck(){}}
  />
  <CarouselControl
    direction="next"
    directionText="Next"
    onClickHandler={function noRefCheck(){}}
  />
</Carousel>

我在这里做错了什么？我试图删除功能，但这也不起作用

答案 当我们将它作为数组传递时它起作用了

const slides = items.map((item) => {
    return (
      <CarouselItem
        onExiting={() => setAnimating(true)}
        onExited={() => setAnimating(false)}
        key={item.src}
      >
        <img src={item.src} alt={item.altText} />
        <CarouselCaption
          captionText={item.caption}
          captionHeader={item.caption}
        />
      </CarouselItem>
    );
  });
  
  return (
    <Carousel
      activeIndex={activeIndex}
      next={next}
      previous={previous}
    >
      <CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={goToIndex} />
      {slides}
      <CarouselControl direction="prev" directionText="Previous" onClickHandler={previous} />
      <CarouselControl direction="next" directionText="Next" onClickHandler={next} />
    </Carousel>
  );

Answer 1

目前还没有解决办法。它似乎是 Reactstrap 中的bug。唯一的解决方法是将

<CarouselItem />

包裹在一个数组中，但是这种方法对您来说很方便。

喜欢在示例代码中使用

.map()

，或者类似的东西：

const slides = [
  <CarouselItem>
    ...
  <CarouselItem />,
  <CarouselItem>
    ...
  <CarouselItem />,
]