React-Table 和 TypeScript：如何在列上使用自定义属性？

Question

我正在使用 react-table 构建表格，但 TypeScript 抱怨我添加的 columns 属性。我的 columns 配置如下：

const columns = useMemo(
    () => [
      {
        Header: 'Name',
        accessor: 'name',
        className: '[some classes here]',
        isSortable: true,
      },
    ...

然后我这样渲染表格：

<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>
    );

换句话说，我有一些可排序的列，在这些列中，我会在标题中呈现自定义的 SortIcon 组件。一些列与类相关联，我将它们添加到 getHeaderProps 中，并指示该列是否可排序。

TypeScript对我已添加到 columns 中的这两个属性提出了抱怨：

Property 'className' does not exist on type 'ColumnInstance<object>'.
Property 'isSortable' does not exist on type 'ColumnInstance<object>'.

有没有好的方法来添加这些类型？还是我处理方式不正确？

- Théophile

Answer 1

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

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

- Théophile