使用ts搭建一个react class组件

在父组件中给子组件传参
在父组件中引入子组件，然后直接传入参数，子组件通过React.Component<Iprops>，它里面的第一个泛型参数就是你父组件传来的参数

App.tsx

import React, { Component } from 'react';
import Button from './componets/button'

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button>小改改</Button>
      </div>
    )
  }
}

button.tsx

import React from 'react'
import './button.css'
interface Iprops {
    size: string
}
class Button extends React.Component<Iprops>{
    render() {
        return (
            <div className="button">{this.props.children}</div>
        )
    }
}
export default Button

设置组件里的私有属性
组件中的私有属性就是React.Component<>里面的第二个参数

interface IState {
    n: number
}
class Button extends React.Component<Iprops, IState>{
    constructor(props: Iprops) {
        super(props)
        this.state = {
            n: 1
        }
    }
    render() {
        return (
            <div className="button">
                {this.state.n}
            </div>
        )
    }
}

修改react开发者工具里组件的名字

我们现在的组件名字是Button，如果我们想修改它只需要在对应组件中修改它静态资源的displayName

class Button extends React.Component<Iprops, IState>{
    static displayName = 'LifaButton'
}

设置组件的props的默认值
当我们没有在父组件中传给子组件props时，我们可以在子组件中通过defaultProps来设置它的默认值

class Button extends React.Component<Iprops, IState>{
    static defaultProps = {
        size: 'normal'
    }
}

问题：在我们不传的时候，我们设置默认值，可能在使用的时候会报错，比如

它会报size有可能是undefined，解决方法强制指定类型为string

this.props.size as string + 1

触发父组件中的点击事件
(1). 在子组件中的props对应的接口里定义onClick类型为React.MouseEventHandler
(2). 父组件中传入onClick，并声明对应的onClick事件，事件里的event类型指定为React.MouseEvent
(3). 子组件里的onClick调用父组件传来的onClick

App.tsx

class App extends Component {
  onClick(e: React.MouseEvent) {
    console.log(e)
  }
  render() {
    return (
      <div className="App">
        <Button onClick={this.onClick}>哈哈哈小改改</Button>
      </div>
    )
  }
}

button.tsx

interface Iprops {
    onClick: React.MouseEventHandler
}
class Button extends React.Component<Iprops> {
  render(
    <div className="button" onClick={this.props.onClick}></div>
   )
}

问题：
上面的e: React.MouseEvent，我们直接打印出e.target是当前的div标签，div可以设置style，所以我们尝试打印出e.target.style，但是我们发现会报错，因为它认为e.target有可能是undefined。
解决办法：

指定e.target类型为HTMLDIVElement

e.target as HTMLDivElement).style

直接为e指定React.MouseEvent<HTMLDivElement>

onClick(e: React.MouseEvent<HTMLDivElement>) {
    const div = e.currentTarget
    console.log(div.style.width)
 }

this问题，react里默认this是undefined，如果需要对属性进行操作，需要使用箭头函数，或者绑定它的this
写法1：

class Button extends React.Component<Iprops, IState>{
    static displayName = 'LifaButton'
    static defaultProps = {
        size: 'normal'
    }
    constructor(props: Iprops) {
        super(props)
        this.state = {
            n: 1
        }
    }
    // 使用箭头函数让this等于外界的this
    onClick= ()=> {
        this.setState({
            n: this.state.n + 1
        })
    }
    render() {
        return (
            <div className="button" onClick={this.onClick}>
                {this.props.children}
                {this.state.n}
            </div>
        )
    }
}

写法2：

onClick(){
        this.setState({
            n: this.state.n + 1
        })
    }
    render() {
        return (
            <div className="button" onClick={this.onClick.bind(this)}>
                {this.props.children}
                {this.state.n}
            </div>
        )
    }

总结：

React.Compoent<>里的第一个参数是props的类型，第二个是state的类型
如果需要绑定click事件，你需要声明onClick类型为React.Mouse(事件类型)EventHandler
onClick两种写法：
(1). 旧语法加bind this.onClick.bind(this)
(2). 直接箭头函数

使用ts搭建一个react class组件

推荐阅读更多精彩内容