Как я могу достичь 100% повторного использования этого компонента Reaction-bootstrap?

Question

Я пытаюсь создать многоразовую карусель, используя реактив-бутстрап, я мог бы создать ее "

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>
                    );
                })
            }
        </>
    );
}

Теперь я знаю, что заставляет его работать, речь идет о передаче объекта prop (который представляет массив объектов, представляющих часть моих категорий), но я не смог найти способдостигните этого

вы можете представить себе такие категории:

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

   ]
]

Answer 1

Если я вас правильно понимаю, вы хотите использовать каждый из items из вашего ReusableCarousel, чтобы сгенерировать новый CarouselItemCategories с отдельным предметом, переданным в качестве реквизита?

Если так,Вы можете взглянуть на функцию cloneElement . Фактически, в вашем отображении 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>
  );
}

Answer 2

Я только что нашел другое решение, используя контекст реакции, я создал модуль CarouselContext:

import React from 'react';

const CarouselContext = React.createContext([]);

export const CarouselProvider = CarouselContext.Provider;
export default CarouselContext

, а затем в компоненте ReusableCarousel :

import { CarouselProvider } from './carouselContext'

const ReusableCarousel = (props) => {
    return (
        <Carousel >
            {props.items.map((item, index) => {
                return (
                    <Carousel.Item key={index} >
                        <Row >
                            {
                              <CarouselProvider value={item}>
                                  {props.children}
                              </CarouselProvider>
                            }
                        </Row>
                    </Carousel.Item>
                );
            })}
        </Carousel>
    );
}

а затем с помощью контекста получить item глобальную переменную

const CarouselItemCategories = () => {
    const item = useContext(CarouselContext);

    return (
        <>
            {
                item.map((c, index) => {
                    return (
                        <Col>
                           //category card here
                        </Col>
                    );
                })
            }
        </>
    );
}