1)定义样式的 TS 类型 【 React.CSSProperties 】
一般定义样式时需要的类型限制,如下:
const customStyle: React.CSSProperties = {
color: 'blue',
fontSize: '16px',
margin: '10px',
};
2)定义 Input Ref 属性时的 TS 类型限制 【 React.RefObject<> 】这是一个泛型,内部表示引用的所有类型,如下:
<FormItem<ModalFormType>
label="部署 Code"
name="departmentCD"
type="Input"
input_maxLength={20}
input_disabled={modalStateTitle === "edit"}
input_ref={modalFormInput as React.RefObject<InputRef>}
rules={[{ required: true, validator: departmentCDChange }]}
style={{ width: "100%" }}
/>
3)定义 Input 输入框内容改变 ( change )事件类型 【 ChangeEvent<HTMLInputElement> 】
4)定义 Input 输入框按下回车事件类型 【 KeyboardEvent<HTMLInputElement> 】
5)定义返回值等通用类型 【 React.ReactNode 】
表示的是所有可以用于渲染的类型,比如最常见的 <span> <div> 字符串,数字,数组等。
如下 Tooltip 组件的封装:文章来源:https://www.toymoban.com/news/detail-808892.html
import { Tooltip } from "antd";
import React from "react";
interface CustomTooltipProps {
title: string;
children?: React.ReactNode;
}
const CustomTooltip: React.FC<CustomTooltipProps> = ({ title, children }) => {
return (
<Tooltip placement="topLeft" color="geekblue" title={title}>
{children}
</Tooltip>
);
};
export default CustomTooltip;
时小记,终有成。文章来源地址https://www.toymoban.com/news/detail-808892.html
到了这里,关于【React 常用的 TS 类型】持续更新的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!