如何在其他组件中包装 Carousel.Item

Question

我正在这个 react-bootstrap 轮播中工作。当前代码运行良好：

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <Carousel>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="https://res.cloudinary.com/tpostr/image/upload/v1553865338/paparouna/IMG_7638-01.jpg"
            alt="First slide"
          />
        </Carousel.Item>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="https://res.cloudinary.com/tpostr/image/upload/v1553865338/paparouna/IMG_7638-01.jpg"
            alt="First slide"
          />
        </Carousel.Item>
      </Carousel>
    </div>
  );
}

Demo working well

现在我试图将Carousel.Item分离到其他组件，这样我就可以使用它而无需重复自己。但是图像没有出现:

const CarouselItem = () => (
  <Carousel.Item>
    <img
      className="d-block w-100"
      src="https://res.cloudinary.com/tpostr/image/upload/v1553865338/paparouna/IMG_7638-01.jpg"
      alt="First slide"
    />
  </Carousel.Item>
);

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <Carousel>
        <CarouselItem />
        <CarouselItem />
      </Carousel>
    </div>
  );
}

Demo with error

我尝试用 forwardRef 包装组件，但没有成功。我做错了什么？注意：我需要 CarouselItem 成为 component/function 才能向其发送道具。

Answer 1

当您在单独的组件中渲染 Carousel.Item 时，您需要将 props 转发给它。

内部 Carousel 将使用 React.cloneElement 向 Carousel.Item 添加额外的道具，当您使用自定义组件时需要转发到 Carousel.Item

const CarouselItem = (props) => (
  <Carousel.Item {...props}>
    <img
      className="d-block w-100"
      src="https://res.cloudinary.com/tpostr/image/upload/v1553865338/paparouna/IMG_7638-01.jpg"
      alt="First slide"
    />
  </Carousel.Item>
);

Working demo

如何在其他组件中包装 Carousel.Item

How to wrap Carousel.Item in other component

javascript

reactjs

react-bootstrap

bootstrap-4