Question

我有一个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组件时动态确定dataType。

如何动态确定React组件的propTypes？

0 个答案: