时间戳

首页 > 解决方案 > 如何将 Carousel.Item 包装在其他组件中

javascript - 如何将 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>
  );
}

演示运行良好

现在我试图分离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>
  );
}

有错误的演示

我试过用 包装组件forwardRef，但没有用。我做错了什么？注意：我需要CarouselItem成为一个组件/函数才能向它发送道具。

标签： javascriptreactjsbootstrap-4react-bootstrap

解决方案

当您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>
);

工作演示

推荐阅读