英文:
Property id does not exist on type T typescript
问题
为什么会出现这个错误，如何修复它？
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]}
/>
英文:
You could constrain your generic type to { id: string }
or use a different approach by making your onRowClick function dynamic.
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>
)
}
Use it by passing your key and onClick function.
<Table
...
onRowClick={['price_id', yourRowClickFunction]}
/>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论