当我们使用react-router进行路由跳转的时候,我们通常都会传递一些参数例如:param,state,query(目前已经被废弃),但是结合typescript使用时,我们需要声明组件的props类型,否则的话我们的tslint就会阻止程序的继续运行,接下来我就介绍一下在react中组件的ts声明:
class组件:
import React from 'react';
import { RouteComponentProps, StaticContext } from 'react-router';
// router中match.params的参数
interface IMatchParams {
name?: string;
}
// router中staticContext的参数
interface IStaticContext extends StaticContext {
age?: number;
}
// router中state的参数类型声明
interface IStateParams {
endTime?: string;
startTime?: string;
}
class Olap extends React.Component<RouteComponentProps<IMatchParams, IStaticContext, IStateParams>,IOlapState> {
componentDidMount() {
const { match, location, staticContext } = this.props;
}
}
hooks组件: