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

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;

时小记,终有成。

相关推荐
小政爱学习!14 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。19 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼26 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k093329 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning1 小时前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人1 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱0011 小时前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
子非鱼9211 小时前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax