在 React 和 TypeScript 联合使用时,React 提供了一些内置类型来帮助你定义组件的属性(props)、状态(state)和其他常见的模式。以下是一些详细的内置类型说明:
常用的 React 类型
-
React.FC / React.FunctionComponent
-
用于定义函数组件的类型。
-
它包含
children
属性,即使你没有显式地在你的类型定义中声明它们。 -
例子:
tsxinterface MyComponentProps { title: string; } const MyComponent: React.FC<MyComponentProps> = ({ title }) => ( <div>{title}</div> );
-
-
React.Component / React.PureComponent
-
用于定义类组件的类型。
-
React.Component<Props, State>
接受两个泛型参数,第一个是 props 的类型,第二个是 state 的类型。 -
React.PureComponent
类似于React.Component
,但它通过浅比较 props 和 state 来帮助避免不必要的渲染。 -
例子:
tsxinterface MyComponentProps { /* ... */ } interface MyComponentState { /* ... */ } class MyComponent extends React.Component<MyComponentProps, MyComponentState> { /* ... */ }
-
-
React.ReactNode
-
表示任何可以被渲染的内容,包括 JSX 元素、字符串、数字、null、布尔值等。
-
例子:
tsxconst content: React.ReactNode = 'This is a text node'; const element: React.ReactNode = <div>{content}</div>;
-
-
React.ReactElement
-
表示一个 JSX 元素。
-
通常在渲染函数中返回 JSX 时使用。
-
例子:
tsxconst element: React.ReactElement = <div>Hello World</div>;
-
-
React.CSSProperties
-
用于定义传递给
style
属性的对象类型。 -
例子:
tsxconst style: React.CSSProperties = { color: 'red', fontSize: 20 };
-
-
React.ReactEventHandler
-
用于定义处理事件的函数类型,如点击、改变等。
-
例子:
tsxconst handleClick: React.ReactEventHandler<HTMLButtonElement> = (event) => { // ... };
-
-
React.Ref
-
用于定义引用类型,可以引用 DOM 元素或类组件的实例。
-
例子:
tsxconst myRef = React.useRef<HTMLDivElement>(null);
-
事件处理相关类型
-
React.ChangeEvent
-
用于
onChange
事件处理器中的事件对象。 -
例子:
tsxconst handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { console.log(event.currentTarget.value); };
-
-
React.FormEvent
-
用于表单事件,如提交表单。
-
例子:
tsxconst handleSubmit = (event: React.FormEvent<HTMLFormElement>) => { event.preventDefault(); // ... };
-
高级类型工具
-
React.ComponentProps
-
用于获取组件的 props 类型。
-
例子:
tsxtype MyComponentProps = React.ComponentProps<typeof MyComponent>;
-
-
React.ComponentPropsWithRef
-
类似于
React.ComponentProps
,但也包括ref
属性。 -
例子:
tsxtype MyComponentProps = React.ComponentPropsWithRef<typeof MyComponent>;
-
-
React.ComponentPropsWithoutRef
-
类似于
React.ComponentProps
,但不包括ref
属性。 -
例子:
tsxtype MyComponentProps = React.ComponentPropsWithoutRef<typeof MyComponent>;
-
使用这些内置类型,你可以为你的 React 应用创建精确的类型定义,这样不仅可以提高代码的可读性和可维护性,还能在编写代码时获得更好的类型检查和自动完成功能。