是否可以在Interface中定义一个render-prop返回值的jsx树？

Question

我有一个用于库的React组件。

这是一个表格，我在Header和Body上通过一个Render-prop给Table Component。原因是我需要引用标头。

所以我想强迫该组件库的用户提供1个标题和1个Body元素作为返回值。当然这是不可能的，所以我希望用户将其作为返回值：

<>
  <TableHeader>
    ...
  </TableHeader>
  <TableBody>
    ...
  </TableBody>
</>

这时我在界面中有这个

export interface ITableProperty {
  /** Component className */
  className?: string;
  /** Table Content */
  children: (headerRef: RefObject<HTMLTableSectionElement>) => ReactElement;
}

这是轻量级版本中Table的用法：

    <Table>
      {headerRef => {
        return (
          <>
            <TableHeader ref={headerRef}>
              <TableHeaderCell title="Wsakdjflkj Zdcnsmni" colId="1" />
              <TableHeaderCell title="WW" colId="2" />
              <TableHeaderCell title="Test letzte" colId="3" />
            </TableHeader>
            <TableBody>
              <TableBodyRow rowId="1">
                <TableBodyCell>Zelle 1</TableBodyCell>
                <TableBodyCell>Zelle 2</TableBodyCell>
                <TableBodyCell>Zelle 3</TableBodyCell>
              </TableBodyRow>
              <TableBodyRow rowId="2">
                <TableBodyCell>Zelle 1sadfsdfasdfsad</TableBodyCell>
                <TableBodyCell>
                  <Text text="Zelle 2asdfsadfsadfasjdfhkjasdhfkjhasdlkjfhaskdjhf" monospace />
                </TableBodyCell>
                <TableBodyCell>Zelle 3asdfasdfasdf</TableBodyCell>
              </TableBodyRow>
              <TableBodyRow rowId="3">
                <TableBodyCell>Zelle 1</TableBodyCell>
                <TableBodyCell>Zelle 2</TableBodyCell>
                <TableBodyCell>Zelle 3</TableBodyCell>
              </TableBodyRow>
              <TableBodyRow rowId="4">
                <TableBodyCell>Zelle 1</TableBodyCell>
                <TableBodyCell>Zelle 2</TableBodyCell>
                <TableBodyCell>Zelle 3</TableBodyCell>
              </TableBodyRow>
            </TableBody>
          </>
        );
      }}
    </Table>