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

这篇具有很好参考价值的文章主要介绍了【React 常用的 TS 类型】持续更新。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React2023年面试题汇总~~~~持续更新中!!!!

    这里总结的所有面试题都是从牛客网找的各种大厂真实场景的面试题,并且做了汇总,各位看官看后做好总结,绝对可以应对88.8%React相关的面试题。 useState() : 允许在函数组件中使用状态。使用useState() 声明一个状态变量,并使用它来 存储组件的状态 。每次更改状态时,组件

    2024年02月09日
    浏览(41)
  • 实际开发中,React应用常见问题【持续更新中】

    实际开发中,React应用常见问题【持续更新中】 “react-router-dom”: “^6.14.2”, “react”: “^18.2.0”, 1、监听路由 2、路由编程式导航 useNavigate() 3、路由链接导航

    2024年02月15日
    浏览(56)
  • React 配置别名 @ ( js/ts 项目中通过 webpack.config.js 配置)

    在 Vue 项目当中,可以使用  @  来表示  src/ ,但在 React 项目中,默认却没有该功能,因此需要进行手动的配置来实现该功能。 别名主要解决的问题:每个页面都使用路径的方式进行引入,这样很麻烦,效率很低,这个时候可以配置一个别名,来直接使用别名引入。 使用

    2024年02月09日
    浏览(45)
  • React 配置别名 @ ( js/ts 项目中通过 @craco/craco 配置)

    在 Vue 项目当中,可以使用 @ 来表示 src/ ,但在 React 项目中,默认却没有该功能,因此需要进行手动的配置来实现该功能。 别名主要解决的问题:每个页面都使用路径的方式进行引入,这样很麻烦,效率很低,这个时候可以配置一个别名,来直接使用别名引入。 使用 @craco

    2024年02月10日
    浏览(43)
  • JavaScript 框架比较:Angular、React、Vue.js

    在 Web 开发领域,JavaScript 提供大量技术栈可供选择。其中最典型的三套组合,分别是 MERN、MEAN 和 MEVN。这些首字母相同的选项各自代表不同的技术加工具组合。为了在这些技术栈中做出明智选择,让我们先从核心组件聊起,再对各自前端框架(React、Angular 和 Vue)进行简化比

    2024年01月20日
    浏览(59)
  • 【实战】 五、CSS 其实很简单 - 用 CSS-in-JS 添加样式(下) —— React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目(七)

    学习内容来源:React + React Hook + TS 最佳实践-慕课网 相对原教程,我在学习开始时(2023.03)采用的是当前最新版本: 项 版本 react react-dom ^18.2.0 react-router react-router-dom ^6.11.2 antd ^4.24.8 @commitlint/cli @commitlint/config-conventional ^17.4.4 eslint-config-prettier ^8.6.0 husky ^8.0.3 lint-staged ^13.1.2 p

    2024年02月12日
    浏览(40)
  • 【实战】 五、CSS 其实很简单 - 用 CSS-in-JS 添加样式(上) —— React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目(六)

    学习内容来源:React + React Hook + TS 最佳实践-慕课网 相对原教程,我在学习开始时(2023.03)采用的是当前最新版本: 项 版本 react react-dom ^18.2.0 react-router react-router-dom ^6.11.2 antd ^4.24.8 @commitlint/cli @commitlint/config-conventional ^17.4.4 eslint-config-prettier ^8.6.0 husky ^8.0.3 lint-staged ^13.1.2 p

    2024年02月12日
    浏览(47)
  • react+vue 前端国密算法sm2、sm3 、sm4的js ts实现

    1. 简单介绍下SM2 和 SM3 SM2 算法:是一种公钥加密算法,它的密钥长度为 256 位,安全性较高。可用于数字签名、密钥协商等场景。 SM3 算法:是一种对称加密算法,用于消息摘要和数字签名等场景。它的密钥长度为 256 位,安全性较高。SM3 算法与 SM2 算法相互配合,提高了整体

    2024年01月19日
    浏览(41)
  • JavaScript框架 Angular、React、Vue.js 的全栈解决方案比较

    在 Web 开发领域,JavaScript 提供大量技术栈可供选择。其中最典型的三套组合,分别是 MERN、MEAN 和 MEVN。前端框架(React、Angular 和 Vue)进行简化比较。 MERN 技术栈包含四大具体组件: MongoDB:一款强大的 NoSQL 数据库,以灵活的 JSON 格式存储数据。 Express.js:一套极简但强大的

    2024年02月03日
    浏览(58)
  • 2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新

    HTML篇 CSS篇 JS篇 Vue篇 TpeScript篇 React篇 微信小程序篇 前端面试题汇总大全(含答案超详细,HTML,JS,CSS汇总篇)-- 持续更新 1. 谈谈你对MVVM开发模式的理解? MVVM是一种简化用户界面的 实践驱动编程方式 。在当前主流的前后端分离的开发模式中,MVVM模式的优越性日益体现,相较

    2024年02月10日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包