函数式组件声明
使用typescript正确的声明react函数式组件是通常有三种:直接声明、React.FC 和 PropsWithChildren。
直接声明
直接声明函数式组件的code如下:
import React from 'react';
type HomePropsType = {
name: string;
age: number;
children?: React.ReactNode;
}
const Home = (props: HomePropsType) => {
return (
<div>
这是home组件
</div>
)
}
export default Home;
使用 React.FC 声明
话不多说,直接上code:
import React, { FC } from 'react';
type HomePropsType = {
name: string;
age: number;
}
const Home: FC<HomePropsType> = (props) => {
return (
<div>
这是home组件
</div>
)
}
export default Home;
此种方式是通过React.FunctionComponent(FC是FunctionComponent的缩写)结合typescript中的泛型来定义函数式组件,这样声明的好处有以下几个:
- props的类型声明(本例中的HomePropsType)中无需声明children属性,React.FC会自动为props添加这个属性类型;
- React.FC对静态属性:displayName、propTypes、defaultProps提供了类型检查和自动补全;
- React.FC显式地定义了返回类型,其他声明方式的返回类型是隐式推导的;
使用PropsWithChildren声明
这种方式可以为你省去频繁定义 children 的类型,自动设置 children 类型为 ReactNode:
import React from 'react';
type HomePropsType = React.PropsWithChildren<{ name: string; age: number; }>
const Home = (props: HomePropsType) => {
return (
<div>
这是home组件
</div>
)
}
export default Home;