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

Question

在 DataGridCell 组件中，我需要提供指出哪个组件应该呈现单元格内容的能力。还需要将 props 传递到该组件中。我尝试用下一种方式（简化版）来做到这一点：

import * as React from 'react';
interface IDataGridCellProps {
    data?: any,
    component?: React.Component,
}

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

我收到下一个错误：TS2604：JSX 元素类型“Cmp”没有任何构造或调用签名

有什么问题以及渲染动态组件的正确方法是什么？

UPD 我使用DataGridCell这样的组件：

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

这是一个循环。cell.component在配置中，看起来像这样：component: Text。Text是我们的组成部分。

UPD 2 所以看起来问题不在于实现，而在于ts-lint和typescript。我将组件转换为类型any，现在它可以工作了。更改线路：const Cmp: any = this.props.component;

任何更有价值的解释将不胜感激。

Answer 1

应该这样做：

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

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>
    );
  }
}