TypeScript上的React表单元格属性问题

nkkqxpd9 于 2023-02-13 发布在 TypeScript

关注(0)|答案(2)|浏览(133)

在react-table v7上，我有一个表，其中每行都是一个嵌套对象。当使用TypeScript时，对于不直接位于基行对象上的属性，我在使列定义数组正常工作时遇到了一些问题。
如下例所示，在具有嵌套属性（batteryModel.capacity）的列中，Cell格式化程序的参数出现错误。出现错误的原因是无法自动推断Cell格式化程序的参数类型。不过，这对“externalId”很有效，因为这是行对象的直接字符串属性。

我可以通过手动定义Cell formatter参数的类型来解决这个问题，但我不认为这是一个好的解决方案，因为如果某些列数据类型发生变化，将来可能会出现bug：

如果这是我不得不忍受的一个缺点，那么也许将行预处理成一个新的对象来扁平化结构会更好，但这感觉像是不必要的复杂性。react-table支持嵌套行数据，但如果它使lib无法检测TypeScript中列的数据类型，我会说它几乎是不可用的。所以我希望有一个好方法来确保即使在嵌套对象上也能正确地检测到数据类型。

react-table docs

typescript

来源：https://stackoverflow.com/questions/70301851/react-table-cellprops-issue-with-on-typescript

2条答案

按热度按时间

1yjd4xko1#

将整个对象定义为一个Column[]，类似于const columnDef: Column[] = {...}。

赞(0）回复(0）举报 2023-02-13

gudnpqoy2#

您可以使用CellProps

const EditCell = (d: CellProps<DataType>) => {
  return (
    <Link
      href={/my/path/ + d.cell.value}
      className="text-sm text-gray-500 underline hover:text-gray-900"
    >
      Edit
    </Link>
  );
};

列对象可能如下所示
x一个一个一个一个x一个一个二个x
Reference for available TS interfaces (v7)

赞(0）回复(0）举报 2023-02-13

我来回答

TypeScript上的React表单元格属性问题

2条答案

相关问题

热门标签

最新问答