将 TypeScript 中的钩子与类联系起来

Question

我没有在TypeScript中使用React Hook，但我有几行代码，如下所示：

const [columns] = React.useState<Column[]>([
{ name: 'product', title: 'Product' },
{ name: 'region', title: 'Region' },
{ name: 'amount', title: 'Sale Amount' },
{ name: 'saleDate', title: 'Sale Date' },
{ name: 'customer', title: 'Customer' },
]);
const [rows] = React.useState<ISale[]>(sales);
const [pageSizes] = React.useState<number[]>([5, 10, 15]);
const [currencyColumns] = React.useState<string[]>(['amount']);

我想在课堂上使用这些 React Hook，但我不知道如何转换它们！

有人可以帮助我吗？谢谢！

Answer 1

这就是您在使用 TypeScript 和 React 时使用基于类的组件的方式。

首先，您需要为类组件的状态/属性定义接口或类型别名。

interface YourComponentState {
columns: Column[];
rows: ISale[];
pageSizes: number[];
currencyColumns: string[];
}

然后，您需要为React.Component提供泛型类型参数以及 props/state 的类型。

class YourComponentName extends React.Component<{}, YourComponentState> {
constructor(props) {
super(props);
this.state = {
columns: [
{ name: 'product', title: 'Product' },
{ name: 'region', title: 'Region' },
{ name: 'amount', title: 'Sale Amount' },
{ name: 'saleDate', title: 'Sale Date' },
{ name: 'customer', title: 'Customer' },
],
rows: sales,
pageSizes: [5, 10, 15],
currencyColumns: ['amount'],
}
}
}

Answer 2

在基于类的反应组件中，你不能使用钩子。 因此，如果您希望将某些内容存储在基于类的状态组件中。您将：

class YourComponentName extends React.Component {
constructor(props) {
super(props);
this.state = {
columns: [
{ name: 'product', title: 'Product' },
{ name: 'region', title: 'Region' },
{ name: 'amount', title: 'Sale Amount' },
{ name: 'saleDate', title: 'Sale Date' },
{ name: 'customer', title: 'Customer' },
],
rows: sales,
pageSizes: [5, 10, 15],
currencyColumns: ['amount']
}
}
}

您可以在组件中访问它们：

this.state.columns