如何将传递的组件渲染为道具对象的关键帧

Question

我正在创建一个表组件，如果用户需要，我希望传入自定义的react组件。TableCell.com组件如下所示：

const TableCell = ({ isHeader = false, title, TitleComponent, position = defaultPosition, ...props }: TableCellProps ) => {
if (isHeader) {
return (
<TableHeaderComponent position={position} {...props}>
{TitleComponent ? TitleComponent : title}
</TableHeaderComponent>
);
}
return (
<TableCellComponent position={position} {...props}>
{title}
</TableCellComponent>
);
};

我希望如下所示：

return <Table 
header={{ 
children: 'Your Table Header',
variant: TextType.h2,
}} 
rows={[
{ title: 'Click Me For Function', onClick: () => alert('hiya') },
{ title: 'Center Aligned Header', position: 'center' },
{ title: 'Right Aligned Header', position: 'right' },
]} 
cells={[
[
{ TitleComponent: <CustomComponent {...props} /> },
{ title: 'Center Aligned', position: 'center' },
{ title: 'Right Aligned', position: 'right' },
],
]}
/>;

当我运行这个程序时，我似乎无法获得作为输出传入的组件。任何关于我做错了什么的想法。我看到了一些关于无呼叫签名的错误，但我不明白为什么会发生这种情况。

干杯，

Answer 1

我发现，对于我的用例来说，最好的方法是将构造函数传递给对象，在本例中为CustomComponent，然后传递另一个带有道具的对象，并在我需要的地方实例化它。