react-ts常见使用

ref

const ref1:React.RefObject<HTMLDivElement> = React.createRef();

const inputRef = React.createRef<Comp>();

class EditScene extends React.Component<Props> { 

    inputRef:React.RefObject<Comp>
    constructor(props) {

        super(props); this.inputRef = React.createRef<Comp>();

    }

}

如何编写 react + ts 版的 HOC

import React, { Component } from 'react';

import HelloClass from './HelloClass';

interface Loading {
    loading: boolean
}

// HOC 可以接收一个类组件，也可以接收一个函数组件，所以参数的类型是 React.ComponentType
// 源码：type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;
function HelloHOC<P>(WrappedComponent: React.ComponentType<P>) {
    return class extends Component<P & Loading> {
        render() {
            const { loading, ...props } = this.props;
            return loading ? <div>Loading...</div> : <WrappedComponent { ...props as P } />;
        }
    }
}

export default HelloHOC(HelloClass);

事件处理

<form
  ref={formRef}
  onSubmit={(e: React.SyntheticEvent) => {
    e.preventDefault();
  }}
</form>

之后内容逐步添加之后内容逐步添加之后内容逐步添加之后内容逐步添加之后内容逐步添加之后内容逐步添加之后内容逐步添加之后内容逐步添加之后内容逐步添加之后内容逐步添加