Reactjs 在React组件映射中为项目键入

我花了一些时间在stackoverflow上搜索答案，但到目前为止还没有找到任何东西，所以我决定问。我目前有一个包含2个项目（表）的映射，可能更多，其中一个键是react组件的名称，一个值是组件本身。这些组件是表（

所有者

和

概述

），它们以

道具

的形式获取

数据

，准备行和标题，然后将它们传递给另一个常见的react组件（

表

）。我一次显示一个表，通过选项卡和下拉列表选择它。数据的类型可以不同，这取决于我从后端得到的数据

接口：

export interface ITables {
    owners: IOwnersTable,
    overview: IOverviewTable,
    [key: string]: ITables[keyof ITables]
}

interface IOverviewTable extends ITable {
    data: OverviewData,
}

interface IOwnersTable extends ITable {
    data: OwnersData,
}

interface ITable {
    isLoading: boolean
    // some other items
}

export type TTableComponent = React.FC<TOwnersTable> | React.FC<TOverviewTable>;

获取和呈现表格取决于所选的

tableName

：

const TableComponent: TTableComponent = tableComponentMap[tableName];

return (
    <TableComponent
        data={data}
        isLoading={isLoading}
    />
)

const TableComponent:TTableComponent=tableComponentMap[tableName]；
返回(
)

表组件之一（第二个组件相同，但数据不同）：

const OwnersTable:React.FC=（{data，…rest}）=>{
//从数据中准备头和行逻辑
返回(
)
};
导出默认所有者表；

问题：地图组件的变量类型应该是什么，以防止不同

数据类型的冲突？真的有可能打字吗？当前，我收到行
data={data}
的下一个类型错误：

错误：（66，25）TS2322:类型“IOOwnersTable”不可分配给类型“IOOverviewTable”。
类型“IOOwnersTable”缺少类型“IOOverViewTable”中的以下属性：

注意：请不要建议在tsconfig中使用type
any
或禁用对
any
的检查

注意：我使用了联合操作，但这似乎不是处理我的案件的正确方法


打字稿v.3.5.1
反应v.16.8.6
错误是如何继续的，它缺少什么属性？基本上都来自IOOverviewTable的数据，例如OwnerData有id、owners、entriesNumber、dependencies和其他一些，OverviewData有id、页面、人工制品、规则。现在
TableComponent
的具体类型是什么？ts错误的背景是什么？当前的描述似乎不够。@hackape-thx-for指出我在调试代码，错过了这种类型。我编辑了我的问题。基本上这是一个工会行动，然而，我发现工会并不是处理这种情况的正确方式。你能提供一个链接来说明你的问题吗？
const TableComponent: TTableComponent = tableComponentMap[tableName];

return (
    <TableComponent
        data={data}
        isLoading={isLoading}
    />
)

const OwnersTable: React.FC<IOwnersTable> = ({data, ...rest}) => {
// prepare heads and rows logic out of data

  return (
    <Table
        head={head}
        rows={rows}
        {...rest}
    />
  )
};

export default OwnersTable;