React - 将道具传递给孩子

Question

我正在努力寻找编写 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