将 Carousel Item 移动到另一个 class 不起作用 [React]

Question

编辑： CodeSandBox link - https://codesandbox.io/s/lucid-boyd-9tqhg?file=/src/HomeCarousels.js

以下代码工作正常：

            <Carousel>
                <Carousel.Item>
                    <img
                    className="d-block w-100"
                    src="https://www.fg-a.com/wallpapers/2019-black-fantasy-sky.jpg"
                    alt="Second slide"
                    />
                    <Carousel.Caption>
                    <h3>Second slide label</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </Carousel.Caption>
                </Carousel.Item>

                <Carousel.Item>
                    <img
                    className="d-block w-100"
                    src="https://www.fg-a.com/wallpapers/black-circles-2018.jpg"
                    alt="Third slide"
                    />
                    <Carousel.Caption>
                    <h3>Third slide label</h3>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                    </Carousel.Caption>
                </Carousel.Item>
            </Carousel>

但是，当我尝试通过将单个 Carousel.Item 移动到它自己的 React 组件中来重构它时，我运行遇到了问题。

SingleCarousel.js

class SingleCarousel extends React.Component {

    render() {
        return (
            <Carousel.Item>
                <img
                    className="d-block w-100"
                    src={this.props.imgPath}
                    alt={this.props.header}
                />
                <Carousel.Caption>
                    <h3>{this.props.header}</h3>
                    <p>{this.props.content}</p>
                </Carousel.Caption>
            </Carousel.Item>
        );
    }

}

Main.js（目前只是用 class 的实例替换一个轮播）：

            <Carousel>
                <SingleCarousel
                    imgPath="https://www.fg-a.com/wallpapers/2019-black-fantasy-sky.jpg"
                    header="Second slide label"
                    content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                />

                <Carousel.Item>
                    <img
                    className="d-block w-100"
                    src="https://www.fg-a.com/wallpapers/black-circles-2018.jpg"
                    alt="Third slide"
                    />
                    <Carousel.Caption>
                    <h3>Third slide label</h3>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                    </Carousel.Caption>
                </Carousel.Item>
            </Carousel>

在第二种情况下，第一个轮播项目不会呈现在页面上。但是，我可以在 DOM 树中看到 DOM 元素。在 chrome 中检查时，问题是第一个项目的“carousel-item”div 永远不会更改为“active carousel-item”。我实际上有两个以上的元素，所以我可以看到它正在循环遍历所有项目，但无法将组件项目转换为活动状态，因此它不会呈现。为什么我会遇到这种行为？这两段代码不是等价的，应该产生相同的行为吗？

Answer 1

我认为这两个代码是等价的，但事实并非如此，所以答案之一是将 SingleCarousel 中的 Carousel.Item 替换为 Fragment 并将其命名为

<Carousel.Item>
  <SingleCarousel
    imgPath="https://www.fg-a.com/wallpapers/black-with-stars.jpg"
    header="First slide label"
    content="Placeholder text"
  />
</Carousel.Item>

Carousel.Item 是转换所必需的，因此您需要在调用某些东西之前添加它

Codesandbox：https://codesandbox.io/s/purple-wave-3300o?file=/src/HomeCarousels.js

将 Carousel Item 移动到另一个 class 不起作用 [React]

Moving Carousel Item to a different class doesn't work [React]

carousel

reactjs

react-bootstrap