0

我使用@type/react-table为我的表设置列,但我的 IDE 出现错误,抱怨Cell类型不正确。我认为它是由Cell可选类型引起的,@type/react-table我该如何解决?

//column.tsx
import {Column, Cell} from 'react-table';

export interface ColumnValue {
    [key: string]: any;
}
export type TableColumn = Column<ColumnValue>
export function createColumn(colDef: TableColumn): TableColumn {
  return colDef;
}
export const name = createColumn({
  id: 'name',
  Header: 'Name Column',
  Cell({value}}) {
    return value.hyperlink
  },
});


//column.test.tsx
import {render} from '@testing-library/react';
import {name} from './Name';

describe('Test Name Column', () => {

  it('shows the name', () => {
    const {getByText} = render(
      name.Cell({
      // Error show TS2339: Property 'Cell' does not exist on type 'TableColumn'
        value: {hyperlink: 'asadasd'}}),
      })
    );
    expect(getByText('i am name')).toBeTruthy();
  });
});
4

1 回答 1

1

的定义Column是一组描述可能的列配置的不同类型的联合。只有其中一些人拥有Cell财产。 ColumnGroup才不是。因此,您不确定类型的变量是否Column支持该Cell属性。

你可以通过使你的createColumn函数通用来解决这个问题。它强制colDef可分配给TableColumn但不扩大类型。

export function createColumn<C extends TableColumn>(colDef: C): C {
  return colDef;
}

现在你在链的下游得到一个错误,因为Cell期望用完整的CellProps.


更新:

当前设置将Cell您的列配置中有效的道具类型推断为CellProps<ColumnValue, any>. 这意味着您可以在Cell({value}) {不指定道具类型的情况下直接编写。

您不能使用推断的道具类型Cell也不能让打字稿推断出您的特定Cell道具仅使用那些道具value(至少在没有一些高级打字稿技巧的情况下并非如此)。

很容易声明Cellonly 需要一个 value 道具,但你必须明确说明。

export const name = createColumn({
  id: 'name',
  Header: 'Name Column',
  Cell({value}: {value: ColumnValue}) {
    return value.hyperlink
  },
});

React 测试库的render方法期望使用ReactElement. 现在你的Cell回报any是由于ColumnValue {[key: string]: any;}. 但可能value.hyperlinkstring一个打字稿错误。您应该将其包装在一个片段中,无论是在Cell本身还是在render.

export const name = createColumn({
  id: 'name',
  Header: 'Name Column',
  Cell({value}: {value: {hyperlink: string}}) {
    return value.hyperlink
  },
});

上面的定义会导致测试出错,所以需要这样做:

const { getByText } = render(
  <>
    {name.Cell({
      value: { hyperlink: "asadasd" }
    })}
  </>
);
于 2021-03-24T22:00:40.260 回答