Реакция компонентов

Question

Я использую DevExtreme React grid , что потрясающе. Мы будем использовать несколько сеток в нескольких приложениях, которые будут иметь одинаковую функциональность - сортировка, фильтрация, выбор и т. Д. c. , так что это немного многословно, чтобы подключить это для каждой страницы сетки.

Итак, я планировал обернуть сетку, и тогда мы сможем использовать эту предварительно смонтированную сетку. Однако я мог видеть, как мы использовали шаблон Paged или шаблон Virtual scrolling. Поэтому я планировал создать «BaseGrid», который обернет сетку DevExtreme, а затем PageGrid и VirtualGrid, который обернет BaseGrid:

const BaseGrid = (children, ...props) => (
  <DevExtremeGrid rootComponent={MyCustomStyledRootGrid} ...props>
    // add sorting, searching, selection wiring
    {children}
  </DevExtrememeGrid>
);
export default BaseGrid;

..

const PagedGrid = (children, ...props) => (
  <BaseGrid ...props>
  // add paging wiring, custom style Table
  {children}
  </BaseGrid>
);
export default PagedGrid;

..

const VirtualGrid = (children, ...props) => (
  <BaseGrid ...props>
    // add virtual scrolling wiring, custom style Table
    {children}
  </BaseGrid>
);
export default VirtualGrid;

Что-то не так с этим шаблоном переупаковки? В React кажется, что это неправильно. Я просто пытаюсь облегчить жизнь, но не хочу попасть в ловушку чрезмерного абстрагирования.