Javascript ReactJS：渲染动态组件和传递道具

在DataGridCell组件中，我需要提供指向哪个组件应该呈现单元格内容的能力。还需要将道具传递到此组件中。 我试着用下一种方法（简化版）来做：

这是一个循环

cell.component

位于配置中，如下所示：

component:Text

<代码>文本是我们的组件

UPD 2 因此，这看起来不是实现中的问题，而是

ts lint

和

typescript

中的问题。我将组件转换为键入

any

，它现在可以工作了。 更改行：

const Cmp:any=this.props.component

任何更有价值的解释都将不胜感激。
应该这样做：

<DataGridCell key={indexCell}
                data={profile}
                component={cell.component}
                />

interface IDataGridCellProps
{
  data?: any;
  component?: React.ComponentType<any>;
}

export default class DataGridCell extends React.Component<IDataGridCellProps> {
  public render()
  {
    const Cmp = this.props.component;
    if (Cmp)
    {
      return (
        <div>
          <Cmp {...this.props.data} />
        </div>
      );
    }

    return null;
  }
}

接口IDataGridCellProps
{
数据？：任何；
组件？：React.ComponentType；
}
导出默认类DataGridCell扩展React.Component{
公共渲染（）
{
const Cmp=this.props.component；
如果（Cmp）
{
返回(
);
}
返回null；
}
}

TypeScript现在可以正确处理jsx中的泛型，因此可以：

interface IDataGridCellProps<T>
{
  data?: T;
  component?: React.ComponentType<T>;
}

export default class DataGridCell<T> extends React.Component<IDataGridCellProps<T>> {
  public render()
  {
    const Cmp = this.props.component;

    if (this.props.data === undefined || Cmp === undefined)
    {
      return null;
    }

    return (
      <div>
        <Cmp {...this.props.data} />
      </div>
    );
  }
}

接口IDataGridCellProps
{
数据？：T；
组件？：React.ComponentType；
}
导出默认类DataGridCell扩展React.Component{
公共渲染（）
{
const Cmp=this.props.component；
if（this.props.data==未定义| | Cmp==未定义）
{
返回null；
}
返回(
);
}
}
如何使用
DataGridCell
？作为
组件
道具传递的是什么？如果
this.props.component
已经是一个组件，您只需执行
{this.props.component}
操作，但是如果您想传递道具给它，您需要传递一个类而不是组件，。。请注意，从呼叫端看，您将执行->
而不是
@MattWay，请查看更新的问题。谢谢您的回答。你能在这里澄清一件事吗？泛型类型永远不知道，我需要定义
公共静态defaultProps:IDataGridCellProps
的类型。怎么解决这个问题？我不知道你说的默认道具是什么。泛型类型T是在使用DataGridCell时由编译器推断出来的，您不必显式声明它。它很好用。非常感谢。
interface IDataGridCellProps<T>
{
  data?: T;
  component?: React.ComponentType<T>;
}

export default class DataGridCell<T> extends React.Component<IDataGridCellProps<T>> {
  public render()
  {
    const Cmp = this.props.component;

    if (this.props.data === undefined || Cmp === undefined)
    {
      return null;
    }

    return (
      <div>
        <Cmp {...this.props.data} />
      </div>
    );
  }
}