react-table 和 TypeScript：列的自定义属性如何工作？

Question

我正在使用 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>'.

有什么好的方法可以添加这些类型吗？还是我处理方法不对？

Answer 1

我没有使用对可排序列的内置支持。不要添加自定义 isSortable 属性，而是使用 disableSortBy: true。对于类，这个更简单的版本有效：

return (
  <th
    {...column.getHeaderProps([
      { className: column.className },
      column.getSortByToggleProps(),
    ])}
  >

react-table 和 TypeScript：列的自定义属性如何工作？

react-table and TypeScript: how do custom properties on columns work?

typescript

react-table