jeudi 16 janvier 2020

React Component Wrapping

I am using DevExtreme React grid, which is awesome. We'll be using a number of grids throughout several apps that will have the same functionality - sorting, filtering, selection, etc. , so it is is a little verbose to wire this up for each grid page.

So I planned to wrap the Grid and then we can use this pre-wired grid. However I could see us using a Paged pattern, or a Virtual scrolling pattern. So I planned to have "BaseGrid" that wraps the DevExtreme grid, and then a PageGrid and VirtualGrid that wraps the 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;

Is anything wrong with this re-wrapping pattern? It feels like the wrong thing to do in React. I'm just trying to make life easier but don't want to fall in the trap of over-abstracting.

Aucun commentaire:

Enregistrer un commentaire