以antd为例 React+Typescript 引入第三方UI库

本文 我们来说说 第三方UI库
其实应用市场上的 第三方UI库都是非常优秀的
那么 react 我们比较熟的肯定还是 antd 我们还是来用它作为演示

这边 我们先访问他的官网 https://3x.ant.design/index-cn
点击开始使用
在这里插入图片描述
在左侧 有一个 在 TypeScript 中使用
通过图标我们也可以看出 这个UI库与react的关系不一般
在这里插入图片描述
上面这种 快速创建一个项目的 就算了 不太适合我们的情况
在这里插入图片描述
我们看下面引入的方式
在这里插入图片描述
这里 我们还是用 npm的方式
打开我们的项目 终端输入

npm install antd --save

这样 依赖包就进来了
在这里插入图片描述
然后 我们

npm start

启动项目
在这里插入图片描述
这边也是没有任何问题

然后 我们按这个文档的案例 将自己的组件改一改
在这里插入图片描述

import * as React from "react";
import Button from 'antd/es/button';interface IProps {
}export default class hello extends React.Component<IProps,any> {public readonly state: Readonly<any> = {data: []}public constructor(props:IProps){super(props);}public render() {return (<div><Button type="primary">Button</Button></div>)}
}

运行项目
在这里插入图片描述
按钮就出现了

然后 我们尝试一个其他组件
在这里插入图片描述
编写代码如下

import * as React from "react";
import { Progress } from 'antd';interface IProps {
}export default class hello extends React.Component<IProps,any> {public readonly state: Readonly<any> = {data: []}public constructor(props:IProps){super(props);}public render() {return (<div><Progress type="circle" percent={75} /><Progress type="circle" percent={70} status="exception" /><Progress type="circle" percent={100} /></div>)}
}

运行结果如下
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/69741.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Linux从入门到精通】通信 | 管道通信(匿名管道 命名管道)

本派你文章主要是对进程通信进行详解。主要内容是介绍 为什么通信、怎么进行通信。其中本篇文章主要讲解的是管道通信。希望本篇文章会对你有所帮助。 文章目录 一、进程通信简单介绍 1、1 什么是进程通信 1、2 为什么要进行通信 1、3 进程通信的方式 二、匿名管道 2、1 什么是…

【OpenCV入门】第七部分——图像的几何变换

文章结构 缩放dsize参数实现缩放fx参数和fy参数实现缩放 翻转仿射变换平移旋转倾斜 透视cmath模块 缩放 通过resize()方法可以随意更改图像的大小比例&#xff1a; dst cv2.resize(src, dsize, fx, fy, interpolation)src&#xff1a; 原始图像dsize&#xff1a; 输出图像的…

华为云云服务器评测|云耀云服务器L实例快速部署MySQL使用指南

文章目录 前言云耀云服务器L实例介绍什么是云耀云服务器L实例&#xff1f;产品优势智能不卡顿价优随心用上手更简单管理更省心 快速购买查看优惠卷购买 安装MySQL重置密码安装更新apt的软件源列表安装MySQL 设置用户名、密码、权限配置安全组 总结 前言 哈喽大家好&#xff0c…

设置Linux CentOS7桥接模式连网

在虚拟机上安装centos7系统后&#xff0c;首要任务就是设置网络。 我们在文章《设置linux centos7连接网络》中讨论了如何设置NAT模式连网。本文讨论如何在设置好NAT模式后&#xff0c;调换为桥接模式。 仍采用图形化方式设置方法。 一、查看物理机网络 把虚拟机设置为桥接…

Doris workload group实战

1.创建测试用户&#xff1a;创建一个用户名为test&#xff0c;密码为test 的用户&#xff1a; create user test% IDENTIFIED BY test;给测试用户赋权&#xff1a;给用户test赋予数据库test.* 权限 grant SELECT_PRIV,LOAD_PRIV,CREATE_PRIV,ALTER_PRIV ON test.* TO test;开…

信息系统概述-生命周期-开发方法

信息系统概述-生命周期 考点分析信息系统概述信息系统分类企业目前所使用的具体的信息化系统信息系统的生命周期&#xff08;重要&#xff09;信息系统的开发方法&#xff08;重要&#xff09; 考点分析 每年都会考3分&#xff0c;2分会超纲 信息系统概述 信息系统分类 业务处理…

时间序列分析:掌握平稳性的概念

摄影&#xff1a;Chris Lawton on Unsplash 一、说明 平稳性是时间序列问题中的一个关键概念。它是指统计属性&#xff08;如均值、方差和协方差&#xff09;随时间变化的稳定性。为了建立有效的预测模型并确定时间序列数据中有意义的模式&#xff0c;了解平稳性的概念以及它与…

Spring MVC 之MVC 体系结构、什么是SpringMVC

Spring MVC简介 MVC 体系结构三层架构MVC设计模式 Spring MVC 是什么&#xff1f;扩展知识Spring模块Data Access/Integration&#xff08;数据访问/集成&#xff09;Web&#xff08;网络层&#xff09;AOP&#xff08;面向切面&#xff09;Messaging&#xff08;消息传送&…

文字验证码:简单有效的账号安全守卫!

前言 文字验证码不仅是一种简单易懂的验证方式&#xff0c;同时也是保护您的账号安全的重要工具。通过输入正确的文字组合&#xff0c;您可以有效地确认自己的身份&#xff0c;确保只有真正的用户才能访问您的账号。 HTML代码 <script src"https://cdn6.kgcaptcha.…

java八股文面试[数据库]——Page页的结构

mysql中数据是存储在物理磁盘上的&#xff0c;而真正的数据处理又是在内存中执行的。由于磁盘的读写速度非常慢&#xff0c;如果每次操作都对磁盘进行频繁读写的话&#xff0c;那么性能一定非常差。为了上述问题&#xff0c;InnoDB将数据划分为若干页&#xff0c;以页作为磁盘与…

算法通关村第十九关——最小路径和

LeetCode64. 给定一个包含非负整数的 m n 网格 grid,请找出一条从左上角到右下角的路径&#xff0c;使得路径上的数字总和为最小。 输入&#xff1a;grid[[1,3,1],[1,5,1],[4,2,1]] 输出&#xff1a;7 解释&#xff1a;因为路径1→3→1→1→1的总和最小。 public int minPath…

Qt鼠标点击事件处理:按Escape键退出程序

创建项目 Qt 入门实战教程&#xff08;目录&#xff09; 首先&#xff0c;创建一个名称为QtKeyEscape的Qt默认的窗口程序。 参考 &#xff1a;Qt Creator 创建 Qt 默认窗口程序 Qt响应键盘Escape事件 打开Qt Creator >>编辑 >> 项目 >> Headers>> …

【iVX】iVX的低代码未来发展趋势:加速应用开发的创新之路

简介&#xff1a; 随着数字化转型的飞速发展&#xff0c;企业和组织对快速开发和交付高质量应用的需求越来越迫切。低代码开发平台作为一种创新的解决方案&#xff0c;极大地简化了应用程序的开发过程。在这一领域&#xff0c;iVX低代码平台作为领先的创业公司&#xff0c;正在…

Python小知识 - Python爬虫进阶:如何克服反爬虫技术

Python爬虫进阶&#xff1a;如何克服反爬虫技术 爬虫是一种按照一定的规则&#xff0c;自动抓取网页信息的程序。爬虫也叫网页蜘蛛、蚂蚁、小水滴&#xff0c;是一种基于特定算法的自动化程序&#xff0c;能够按照一定的规则自动的抓取网页中的信息。爬虫程序的主要作用就是从一…

记录 使用 git 克隆仓库报错:Warning: Permanently added‘github.com’ to the .....(ssh )

解决方法&#xff1a; 1. 新建空文件夹->右键->点击 Git Bash Here2. 输入 cd C&#xff1a;3. 输入 cat ~/.ssh/id_rsa.pub4. 输入 ssh-keygen重复回车&#xff0c;生成一个矩形&#xff0c;则说明公钥已经生成了。重复步骤3&#xff0c;生成publickey&#xff0c;右键…

Vue2基础学习

vue基础学习 Vue基础指令v-show 和 v-ifv-on指令v-bind指令v-bind操作classv-bind 操作stylev-for 指令练习&#xff1a;图书管理案例v-modelv-model原理 指令修饰符v-model指令修饰符click.stop-》阻止冒泡按键修饰符阻止默认行为 计算属性计算属性简写computed计算属性VS方法…

HTML 标签讲解

HTML 标签讲解 HTML 语言结构根元素元数据元素主体根元素大纲元素文本内容语义化内联文本图像与多媒体编辑标识table表格内容表单内容table表单 HTML 语言结构 Markup &#xff08;标记、标签&#xff09;用来容纳和描述内容 严格意义上&#xff0c;标签是指开始标签&#xf…

优化爬虫效率:利用HTTP代理进行并发请求

网络爬虫作为一种自动化数据采集工具&#xff0c;广泛应用于数据挖掘、信息监测等领域。然而&#xff0c;随着互联网的发展和网站的增多&#xff0c;单个爬虫往往无法满足大规模数据采集的需求。为了提高爬虫的效率和性能&#xff0c;我们需要寻找优化方法。本文将介绍一种利用…

企业无线局域网部署最佳实践

文章目录 企业无线局域网部署最佳实践引言1. 无线网规划和设计a. 选择合适的频宽b. 网络规划工具c. 考虑物理环境d. 用户密度和需求e. 未来扩展f. 安全性和策略g. 测试和验证2. 无线局域网容量2.1 用户和设备预测2.2 应用流量分析2.3 带宽管理2.4 无线技术选择2.5 网络健康检查…

鳄鱼指标和ADX组合后,发现买卖信号真清晰

通过之前的文章分享&#xff0c;anzo capital昂首资本相信各位投资者对ADX已经有了深刻的理解&#xff0c;今天在后台有小伙伴分享了鳄鱼指标&#xff0c;没想到的是&#xff0c;鳄鱼指标和ADX组合后&#xff0c;买卖信号变的更清晰了&#xff0c;今天就分享一下。 鳄鱼指标是一…