Question

我是Typescript的新手，我想用Typescript编写React。

我看到一个演示，如下所示。

我对类声明中的<Props, State>感到困惑。我认为这只是通用，但这没有任何意义。它和上面的type Props和type State有关系吗？

import * as React from 'react';

type Props = {
  label: string;
};

type State = {
  count: number;
};

export class ClassCounter extends React.Component<Props, State> {
  readonly state: State = {
    count: 0,
  };

  handleIncrement = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    const { handleIncrement } = this;
    const { label } = this.props;
    const { count } = this.state;

    return (
      <div>
        <span>
          {label}: {count}
        </span>
        <button type="button" onClick={handleIncrement}>
          {`Increment`}
        </button>
      </div>
    );
  }
}

Answer 1

React.Component<Props, State>是您描述的“传递”，不是声明泛型（具有相似的语法）。

这与foo(x, y)与function foo(x, y) {}的关系相同。

在前一种情况中，您要将名为x和y的变量传递到函数foo中。

在后者中，您要声明一个函数foo，该函数希望传入两个变量，它将在函数内部将它们引用为x和y。

等效地，type React.Component<Props, State> =会声明，class Xx extends React.Component<Props, State> {就是说“在这里，请使用我在其他地方定义的Props和State这些类型”。 >

<Props，State>在`React.Component <Props，State>`中是什么意思

1 个答案: