Reactjs 是否可以在接口中定义渲染属性返回值的jsx树?

Reactjs 是否可以在接口中定义渲染属性返回值的jsx树?,reactjs,typescript,interface,jsx,Reactjs,Typescript,Interface,Jsx,我有一个库的React组件 这是一个表,我给表组件一个渲染道具上的标题和主体。原因是我需要对标题进行引用 所以我想强制这个组件库的用户给出1个Header和1个Body元素作为返回值。当然这是不可能的,所以我希望用户将其作为返回值: <> <TableHeader> ... </TableHeader> <TableBody> ... </TableBody> </> ... ... 此

我有一个库的React组件

这是一个表,我给表组件一个渲染道具上的标题和主体。原因是我需要对标题进行引用

所以我想强制这个组件库的用户给出1个Header和1个Body元素作为返回值。当然这是不可能的,所以我希望用户将其作为返回值:

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

...
...
此时,我的界面中有以下内容:

export interface ITableProperty {
  /** Component className */
  className?: string;
  /** Table Content */
  children: (headerRef: RefObject<HTMLTableSectionElement>) => ReactElement;
}
导出接口ITableProperty{
/**组件类名*/
类名?:字符串;
/**表内容*/
子元素:(headerRef:ReObject)=>ReactElement;
}
这是表在轻量级版本中的用法:

    <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>

{headerRef=>{
返回(
泽尔1
泽尔2号
泽尔3
Zelle 1sadfsdfasdfsad
Zelle 3asdfasdf
泽尔1
泽尔2号
泽尔3
泽尔1
泽尔2号
泽尔3
);
}}