将 TypeScript 中的钩子反应到类答案

【问题标题】：React Hooks in TypeScript to Classes将 TypeScript 中的钩子反应到类
【发布时间】：2020-09-06 05:55:27
【问题描述】：

我没有在 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 但我不知道如何转换它们！

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

【问题讨论】：

这能回答你的问题吗？ Using state in react with TypeScript

标签： reactjs typescript react-hooks

【解决方案1】：

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

首先，您需要为类组件的状态/道具定义一个接口或类型别名。

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

然后，您需要为React.Component 提供泛型类型参数以及道具/状态的类型。

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'],
    }
  }
}

【讨论】：

【解决方案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

【讨论】：