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