问题

为什么会出现这个错误，如何修复它？

Property 'id' does not exist on type 'T'.

它出现在 `row.original.id` 处

export interface ITable<T> {
columns: any;
data: T[];
with_transition?: boolean;
onClick?: (price_id: string) => void;
}

export default function Table<T extends object>({
columns,
data,
with_transition,
onClick
}: ITable<T>) {
const {
getTableProps, // table props from react-table
getTableBodyProps, // table body props from react-table
headerGroups, // headerGroups, if your table has groupings
rows, // rows for the table based on the data passed
prepareRow // Prepare the row (this function needs to be called for each row before getting the row props)
} = useTable({
columns,
data
});
return (
<table {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps()}>{column.render("Header")}</th>
))}
</tr>
))}
</thead>
<tbody className={${with_transition && 't-body-transition'}} {...getTableBodyProps()}>
{rows.map((row, i) => {
prepareRow(row);
return (
<tr className="transition" {...row.getRowProps()}>
{row.cells.map(cell => {
return <td onClick={() => onClick && row.original.id && cell.column.Header !== 'Button' && onClick(row.original.id)} className="transition" {...cell.getCellProps()}>{cell.render("Cell")}</td>
})}
</tr>
);
})}
</tbody>
</table>
)
}

有人能解决这个问题吗？我想使用泛型而不是静态类型。

<details>
<summary>英文:</summary>

Why do I get this error and how can I fix it?

Property 'id' does not exist on type 'T'.

It comes at `row.original.id`

export interface ITable<T> {
columns: any;
data: T[];
with_transition?: boolean;
onClick?: (price_id: string) => void;
}

export default function Table<T extends object>({
columns,
data,
with_transition,
onClick
}: ITable<T>) {
const {
getTableProps, // table props from react-table
getTableBodyProps, // table body props from react-table
headerGroups, // headerGroups, if your table has groupings
rows, // rows for the table based on the data passed
prepareRow // Prepare the row (this function needs to be called for each row before getting the row props)
} = useTable({
columns,
data
});
return (
<table {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps()}>{column.render("Header")}</th>
))}
</tr>
))}
</thead>
<tbody className={${with_transition && 't-body-transition'}} {...getTableBodyProps()}>
{rows.map((row, i) => {
prepareRow(row);
return (
<tr className="transition" {...row.getRowProps()}>
{row.cells.map(cell => {
return <td onClick={() => onClick && row.original.id && cell.column.Header !== 'Button' && onClick(row.original.id)} className="transition" {...cell.getCellProps()}>{cell.render("Cell")}</td>;
})}
</tr>
);
})}
</tbody>
</table>
)
}

Can anyone solve this issue? I want to use generic not static types.

</details>


# 答案1
**得分**: 1

你可以将你的通用类型限制为`{ id: string }`，或者使用不同的方法来使你的 `onRowClick` 函数具有动态性。

```js
export interface ITable<T> {
  ...,
  onRowClick?: [keyof T, (value: T[keyof T]) => void];
}

function Table<T>({
  ...,
  onRowClick
}: ITable<T>) {
  return (
    ...,
     <tr {...row.getRowProps()}>
       {row.cells.map(cell => (
         <td  
            onClick={() => {
              if (onRowClick) {
                const [key, onClick] = onRowClick;

                onClick(row.original[key]);
              }
            }}>
            ...
          </td>
        ))}
     </tr>
  )
}

通过传递你的键值和点击函数来使用它。

<Table 
  ...
  onRowClick={['price_id', yourRowClickFunction]}
/>

export interface ITable<T> {
  ...,
  onRowClick?: [keyof T, (value: T[keyof T]) => void];
}

function Table<T>({
  ...,
  onRowClick
}: ITable<T>) {
  return (
    ...,
     <tr {...row.getRowProps()}>
       {row.cells.map(cell => (
         <td  
            onClick={() => {
              if (onRowClick) {
                const [key, onClick] = onRowClick;

                onClick(row.original[key]);
              }
            }}>
            ...
          </td>
        ))}
     </tr>
  )
}

<Table 
  ...
  onRowClick={['price_id', yourRowClickFunction]}
/>