Блог

Я пытаюсь найти правильный способ написания компонента TableWrapper. Я хочу, чтобы при его использовании структура была примерно такой. Не могли бы вы, пожалуйста, помочь мне, как передать реквизит от родителя детям?

           <TableWrapper
        loadData={loadData}
        data={data}
        isExternalOpen={isExternalOpen}
        setIsExternalCreate={setIsExternalCreate}
        setIsExternalOpen={setIsExternalOpen}
        showEmptyState={false}
        limit={4}
        loading={loading}
      >
        {({ dispatchHandler, isOpen, setIsOpen, data, previousPage, nextPage }: TableWrapperComponentInterface) => (
          <>
            <Table
              title={title}
              onCreateHandler={onCreateHandler}
              columns={columns}
              data={data}
              previousPage={previousPage}
              nextPage={nextPage}
              actions={[actions]}
            />
            <TableModal isOpen={isOpen} setIsOpen={setIsOpen} setIsCreate={setIsCreate}>
              <>Doesn't matter</>
            </TableModal>
          </>
        )}
      </TableWrapper>
 

У меня есть что-то вроде этого, но это кажется неправильным. Я был бы рад, если бы кто-нибудь мог мне помочь. 🙂

 export const TableWrapper = (props: TableWrapperInterface) => {
  const {
    children,
    loadData,
    setIsExternalCreate,
    setIsExternalOpen,
    emptyStateAddButtonTitle,
    emptyStateButton = true,
    emptyStateText,
    showEmptyState,
    loading,
    data,
    limit = 10,
    isExternalOpen,
  } = props

  ...
  
  const Component = children


  return (
    <>
      <div>
        <Component
      dispatchHandler={dispatchHandler}
      setIsOpen={setIsExternalOpen}
      isOpen={isExternalOpen}
      data={sendData}
      loadData={loadData}
      previousPage={previousPage}
      nextPage={nextPage}
    />
      </div>
    </>
  )
}

export default TableWrapper