React TSX文件中的泛型

// 使用泛型定义组件的属性类型
interface MyComponentProps {
  name: string;
}

class MyComponent extends React.Component<MyComponentProps> {
  render() {
    return <div>Hello, {this.props.name}!</div>;
  }
}

// 使用泛型定义组件的状态类型
interface MyComponentState {
  count: number;
}

class MyComponent extends React.Component<{}, MyComponentState> {
  constructor(props: {}) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        Count: {this.state.count}
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>Increment</button>
      </div>
    );
  }
}

// 使用泛型定义事件处理程序的参数类型
interface MyComponentProps {
  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
}

class MyComponent extends React.Component<MyComponentProps> {
  render() {
    return <button onClick={this.props.onClick}>Click me</button>;
  }
}

// 使用泛型定义组件的引用类型
interface MyComponentProps {
  name: string;
}

class MyComponent extends React.Component<MyComponentProps> {
  private myRef = React.createRef<HTMLDivElement>();

  componentDidMount() {
    console.log(this.myRef.current);
  }

  render() {
    return <div ref={this.myRef}>Hello, {this.props.name}!</div>;
  }
}