循环时反应引导轮播不显示答案

【问题标题】：react-bootstrap Carosuel not displaying when looping循环时反应引导轮播不显示
【发布时间】：2020-05-28 09:10:46
【问题描述】：

我正在循环到一组图像并渲染<Carousel.Item>。但是<Carousel.Item> 每当我使用循环时它都会显示。每当我没有图像并且我将图像渲染为没有似乎按预期工作的循环时。这是我写的代码：

        <Container>
            <Row>
              <Col>
                <div className="carousel-wrapper">
                  <Carousel>
                    {step.screenshots.length ? (
                      <>
                        {step.screenshots.map((screenshot: string, index: number) => {
                          return (
                            <Carousel.Item key={index}>
                              <img
                                className="d-block w-100"
                                src={`/api/p/task/results/${screenshot}`}
                                alt="First slide"
                              />
                            </Carousel.Item>
                          )
                        })}
                      </>
                    ) : (
                      <Carousel.Item>
                        <img
                          className="d-block w-100"
                          src={`/api/p/task/results/5eb13cdb6cc3804560b955cc/step2/screenshot0`}
                          alt="First slide"
                        />
                      </Carousel.Item>
                    )}
                  </Carousel>
                </div>
              </Col>
            </Row>
          </Container>

有什么想法为什么现在在我循环播放时会显示轮播？如何在不需要覆盖 css 的情况下显示图像？

我尝试指定活动索引，但也没有用。

【问题讨论】：

从不和谐中过来——很高兴在那里聊天；为什么您对长度为 1 的场景有不同的处理方式？还有FWIW——你应该把你的alt文本改成Slide ${index}

标签： reactjs react-bootstrap

【解决方案1】：

您能否将您的代码简化为以下内容并反馈：

<Container>
  <Row>
    <Col>
      <div className="carousel-wrapper">
        <Carousel>
          {step.screenshots.map((screenshot: string, index: number) => {
            <Carousel.Item key={index}>
              <img
                className="d-block w-100"
                src={`/api/p/task/results/${screenshot}`}
                alt={"Slide ${index}"}
              />
            </Carousel.Item>
          })}
        </Carousel>
      </div>
    </Col>
  </Row>
</Container>

【讨论】：