如何动态确定react组件的类型?

我有一个反应成分如下:

import {
  dataType,
} from './types.js';

class TableUp extends React.Component {
  static propTypes = {
    palette: t.object,
    title: t.string,
    data: dataType.isRequired,
    selection: t.object,
    querySearch: t.object,
    pagination: t.object,
    onMount: t.func,
  };

而在 types.js

import t from 'prop-types';

export const dataValueType = t.shape({
  id: t.oneOfType([
    t.string,
    t.number,
  ]).isRequired,
  name: t.string,
  status: t.string,
});
export const dataValuesType = t.arrayOf(dataValueType);

export const dataColumnType = t.shape({
  key: t.string.isRequired,
  label: t.string.isRequired,
  numeric: t.bool,
});
export const dataColumnsType = t.arrayOf(dataColumnType);

export const dataType = t.shape({
  values: dataValuesType,
  columns: dataColumnsType,
});

当我实例化 <TableUp> 组件,我需要传递可能因情况而异的数据。

因此,以下内容将 失败 工作

const data = {
  values: [
    {description: "10 percent", allocated: 10.00},
    {description: "50 percent", allocated: 50.00},
    {description: "40 percent", allocated: 40.00},
  ],
  columns: [
    {key: 'attributes.description', label: 'Milestone'},
    {key: 'attributes.allocated',   label: 'Percent', numeric: true},
  ]
};
return (
  <TableUp inputProps={{name:"gr_table"}} data={data} />
);

我想知道在实例化TableUp组件时,是否有一种方法可以动态确定数据类型。