react 中的常用类型

React.FC | React.FunctionComponent

表示函数组件的类型

const MyComponent: React.FC<Props> = function(p) {...}

React.Component

表示类组件的类型

class MyComponent extends React.Component<Props, State> { ...

React.ComponentType

表示(React.FC | React. Component)的联合的类型-在 HOC 中使用

const withState = <P extends WrappedComponentProps>(
      WrappedComponent: React.ComponentType<P>,
    ) => { ...

React.ComponentProps

获取指定组件 XXX 的 Props 类型(警告: 不能使用静态声明的默认道具和通用道具)

type MyComponentProps = React.ComponentProps<typeof MyComponent>;

React.ReactElement | JSX.Element

类型表示 DOM 组件(例如

)或自定义的组件(例如 )

const elementOnly: React.ReactElement = <div /> || <MyComponent />;

React.ReactNode

表示任何可能类型的 React 节点( ReactElement + 基本 JS 类型)

const elementOrPrimitive: React.ReactNode = 'string' || 0 || false || null || undefined || <div /> || <MyComponent />;
const Component = ({ children: React.ReactNode }) => ...

React.CSSProperties

JSX 中输入表示样式对象的类型

const styles: React.CSSProperties = { flexDirection: 'row', ...
const element = <div style={styles} ...

React.HTMLProps

表示指定 HTML 元素的类型-用于扩展 HTML 元素

const Input: React.FC<Props & React.HTMLProps<HTMLInputElement>> = props => { ... }

<Input about={...} accept={...} alt={...} ... />

React.ReactEventHandler

表示泛型事件处理函数-用于声明处理事件的函数

const handleChange: React.ReactEventHandler<HTMLInputElement> = (ev) => { ... }

<input onChange={handleChange} ... />

React.XXXEvent

表示更具体的事件。 常见的事件: ChangeEvent, FormEvent, FocusEvent, KeyboardEvent, MouseEvent, DragEvent, PointerEvent, WheelEvent, TouchEvent.

const handleChange = (ev: React.MouseEvent<HTMLDivElement>) => { ... }

<div onMouseMove={handleChange} ... />

在上面的代码中反应。 鼠标事件  React.MouseEvent  是鼠标事件的类型，这个事件发生在  HTMLDivElement  上

react 中的常用类型

https://downhill6.pages.dev/2020/02/04/react 中的常用类型/

作者

大下坡

发布于

2020-02-05

更新于

2020-02-05

许可协议

#webreacttypescript