react-table 和 TypeScript:列的自定义属性如何工作?
react-table and TypeScript: how do custom properties on columns work?
我正在使用 react-table
构建 table,但 TypeScript 抱怨我添加到 columns
的属性。我的 columns
设置如下:
const columns = useMemo(
() => [
{
Header: 'Name',
accessor: 'name',
className: '[some classes here]',
isSortable: true,
},
...
然后我这样渲染 table:
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => {
const getHeaderPropsArgs = [{ className: column.className }];
if (column.isSortable) getHeaderPropsArgs.push(column.getSortByToggleProps());
return (
<th {...column.getHeaderProps(getHeaderPropsArgs)}>
<div>
{column.render('Header')}
{column.isSortable ? <SortIcon isSorted={column.isSorted} isSortedDesc={column.isSortedDesc} /> : null}
</div>
</th>
);
换句话说,我的一些列是排序的table,对于这些列,我在header 中呈现自定义SortIcon
组件。一些列与它们相关联 类,我将它们添加到 getHeaderProps
以及使列排序 table 或不排序的说明。
TypeScript 抱怨我添加到 columns
的这两个属性:
Property 'className' does not exist on type 'ColumnInstance<object>'.
Property 'isSortable' does not exist on type 'ColumnInstance<object>'.
有什么好的方法可以添加这些类型吗?还是我处理方法不对?
我没有使用对可排序列的内置支持。不要添加自定义 isSortable
属性,而是使用 disableSortBy: true
。对于 类,这个更简单的版本有效:
return (
<th
{...column.getHeaderProps([
{ className: column.className },
column.getSortByToggleProps(),
])}
>
我正在使用 react-table
构建 table,但 TypeScript 抱怨我添加到 columns
的属性。我的 columns
设置如下:
const columns = useMemo(
() => [
{
Header: 'Name',
accessor: 'name',
className: '[some classes here]',
isSortable: true,
},
...
然后我这样渲染 table:
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => {
const getHeaderPropsArgs = [{ className: column.className }];
if (column.isSortable) getHeaderPropsArgs.push(column.getSortByToggleProps());
return (
<th {...column.getHeaderProps(getHeaderPropsArgs)}>
<div>
{column.render('Header')}
{column.isSortable ? <SortIcon isSorted={column.isSorted} isSortedDesc={column.isSortedDesc} /> : null}
</div>
</th>
);
换句话说,我的一些列是排序的table,对于这些列,我在header 中呈现自定义SortIcon
组件。一些列与它们相关联 类,我将它们添加到 getHeaderProps
以及使列排序 table 或不排序的说明。
TypeScript 抱怨我添加到 columns
的这两个属性:
Property 'className' does not exist on type 'ColumnInstance<object>'.
Property 'isSortable' does not exist on type 'ColumnInstance<object>'.
有什么好的方法可以添加这些类型吗?还是我处理方法不对?
我没有使用对可排序列的内置支持。不要添加自定义 isSortable
属性,而是使用 disableSortBy: true
。对于 类,这个更简单的版本有效:
return (
<th
{...column.getHeaderProps([
{ className: column.className },
column.getSortByToggleProps(),
])}
>