javascript - 我怎样才能实现react-bootstrap组件100%的可重用性？

Question

我正在尝试使用react-bootstrap创建一个可重复使用的轮播，我可以创建那个”

const ReusableCarousel = (props) => {
    return (
        <Carousel className="mt-4 border">
            {props.items.map((item, index) => {
                return (
                    <Carousel.Item key={index}>
                        <Row> 
                            {props.children}
                        </Row>
                    </Carousel.Item>
                );
            })}
        </Carousel>
    );
}

现在，正如您所看到的，它可以重复使用，直到轮播项目为止，props.children 可能代表每一张幻灯片的多个元素或每张幻灯片的单个元素，但根据我的说法，我无法实现这一点逻辑

在父级中:

   <ReusableCarousel items={categories}> //categories is an array of arrays of objects
      {
         //item prop should be passed here to carouselItemCategories component
         //but i couldn't find a way to achieve that
         <CarouselItemCategories key={i} /> 
      }
   </ReusableCarousel>

carouselItemCategories 组件:

const CarouselItemCategories = (props) => {
    //still in my dreams
    const { item } = props;
    return (
        <>
            {
                item.map((c, index) => {
                    return (
                        <Col key={index}>
                            //a category card here
                        </Col>
                    );
                })
            }
        </>
    );
}

现在我知道是什么让它起作用了，它是关于传递 item prop(它代表一个对象数组代表我的类别的一部分)，但我找不到任何方法来实现这一点

你可以想象这样的类别:

const categories = [
   [
    {
      title: 'Laptops',
       background: 'red'
    },
    {
      title: 'Tablets',
      background: 'blue';
    }
   ],
   [
    {
      title: 'Mouses',
       background: 'yellow'
    },
    {
      title: 'Printers',
      background: 'orange';
    }

   ]
]

Answer 1

如果我理解正确的话，您希望使用 ReusableCarousel 中的每个 items 来生成包含单个项目的新 CarouselItemCategories作为 Prop 传入？

如果是这样，您可能需要查看 cloneElement function 。实际上，在 items 属性的映射中，您可以创建子元素的克隆，并将单个 item 作为属性附加到该克隆。像这样的事情:

const ReusableCarousel = (props) => {
  return (
      <Carousel className="mt-4 border">
          {props.items.map((item, index) => {
              return (
                  <Carousel.Item key={index}>
                      <Row> 
                          {React.cloneElement(props.children, { item })}
                      </Row>
                  </Carousel.Item>
              );
          })}
      </Carousel>
  );
}