十七、TS在react中的使用 - 图1

类组件

  1. import React,{ Component } from 'react';
  2. import { Button } from 'antd'
  4. interface Greeting {
  5.     name: string;
  6.     firstName: string;
  7.     lastName: string;
  8. }
  10. interface State {
  11.     count: number
  12. }
  14. class HelloClass extends Component<Greeting, State> {
  15.     state: State = {
  16.         count: 0
  17.     }
  18.     static defaultProps = {
  19.         firstName: '',
  20.         lastName: ''
  21.     }
  22.     render() {
  23.         return (
  24.             <>
  25.                 <p>你点击了 {this.state.count}</p>
  26.                 <Button onClick={()=>{this.setState({count: this.state.count + 1})}}>Hello {this.props.name}</Button>
  27.             </>
  28.         )
  29.     }
  30. }
  31. export default HelloClass