【React 常用的 TS 类型】持续更新

九层嵌套 for 循环2024-01-12 14:15

1）定义样式的 TS 类型【 React.CSSProperties 】

一般定义样式时需要的类型限制，如下：

javascript 复制代码

const customStyle: React.CSSProperties = {
    color: 'blue',
    fontSize: '16px',
    margin: '10px',
  };

2）定义 Input Ref 属性时的 TS 类型限制【 React.RefObject<> 】这是一个泛型，内部表示引用的所有类型，如下：

javascript 复制代码

  <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 组件的封装：

javascript 复制代码

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;

时小记，终有成。