如何将 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 作为组件/函数才能向其发送道具。

解决方法

当您在单独的组件中渲染 vaex==3.0.0 vaex-arrow==0.5.1 vaex-astro==0.7.0 vaex-core==2.0.3 vaex-hdf5==0.6.0 vaex-jupyter==0.5.2 vaex-ml==0.9.0 vaex-server==0.3.1 vaex-viz==0.4.0 时，您需要将 props 转发给它。

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

Carousel.Item

Working demo