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

【问题标题】：react-table and TypeScript: how do custom properties on columns work?react-table 和 TypeScript：列上的自定义属性如何工作？
【发布时间】：2021-06-03 13:14:51
【问题描述】：

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

有没有添加这些类型的好方法？还是我以错误的方式接近这个？

【问题讨论】：

标签： typescript react-table

【解决方案1】：

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

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

【讨论】：