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

How to wrap Carousel.Item in other component(如何将Carousel.Item包装在其他组件中)

问题描述

我在此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成为组件/函数才能向其发送道具。

推荐答案

当您在单独的组件中呈现Carousel.Item时，您需要将道具转发给它。

内部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包装在其他组件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！