在循环内时，Carousel.Item不呈现任何内容

问题描述

我在react js中的carousel下方，当我单独定义所有3个Carousel.Item时，可以按预期工作，但在循环内部却无法正常工作。

<Carousel activeIndex={index} onSelect={handleSelect} className="carousel">
                {carouselItems.map((item,index) => {
                    console.log('item ' + JSON.stringify(item));
                    <Carousel.Item key={index}>
                        <img
                            className="d-block w-100"
                            src="/images/moon.jpg"
                            alt={item.heading}
                        />
                        <Carousel.Caption>
                            <h3>{item.heading}</h3>
                            <p>{item.brief}</p>
                        </Carousel.Caption>
                        </Carousel.Item>
                    })}
</Carousel>

在控制台日志中，我可以看到预期的数据，但是仍然没有任何显示，有人可以建议我是否丢失了某些东西。

解决方法

要使其正常工作，您需要return中的map：

<Carousel
        activeIndex={index}
        onSelect={handleSelect}
        className="carousel"
      >
        {carouselItems.map((item,index) => {
          console.log("item " + JSON.stringify(item));
          // you forgot to return the Carousel.Item here:
          return (
            <Carousel.Item key={index}>
              <img
                className="d-block w-100"
                src="/images/moon.jpg"
                alt={item.heading}
              />
              <Carousel.Caption>
                <h3>{item.heading}</h3>
                <p>{item.brief}</p>
              </Carousel.Caption>
            </Carousel.Item>
          );
        })}
      </Carousel>