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>'.

有没有好的方法来添加这些类型？或者我以错误的方式处理这个问题？

Answer 1

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

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