React引用ant design时要注意的问题

已于 2022-04-23 18:25:15 修改
阅读量3.5k 收藏 2
点赞数
分类专栏： 前端 # React 文章标签： 前端 react
于 2022-04-23 18:19:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ANNaScripter/article/details/124366825
版权

一、观察antd、react包版本是否与ant design代码所需的版本一致（接近）

1、查看代码版本

ant design几个网站长得几乎一样，但代码对应的版本不一样，如果找错了网站后续会出很多错，注意在官网的上方进行设置，如下图所示。

2、查看自己下载的antd版本

法一：在package.json里找antd

法二：用命令行

npm info antd

二、如何在react中使用ant design代码

ps：以antd@4.19.5的登录表单为例

Ⅰ点击复制代码到一个空白js文件中

 to test.js，无需做任何修改

 Ⅱ在父组件中引入

白开水儿
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
react+ant design实现Table的增、删、改的示例代码
10-17
主要介绍了react+ant design实现Table的增、删、改的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-admin：基于React + ant-design的用于后台管理项目的脚手架
02-05
React管理员 React + Ant Design脚手架，专用作后台管理系统，反复在项目中实践和优化，功能齐全，细节完善，并提供丰富的示例代码，可以直接上手和开发。 技术选型 react + redux + react-router + ant-design +不可变+获取 redux-action + redux-logger 类名+ lodash ass webpack2 + react-hot-loader 埃斯林特 实现的功能 热加载 ES6 / 7 动态路由 动作日志打印 配置生成模拟接口 本地节点服务器 ESLint 萨斯 后记 获取数据 更多特性 除了主流的技术选型
react-antd-landing-page:使用React和Ant Design制作的登录页面
05-28
React Ant设计登陆页面 我尝试使用React和Ant Design重新创建引导登录页面。 您可以在查看现场演示。 原始设计属于 。
AntdPro上传文件之Antd各个版本的对比
Welkin_qing的博客
04-15 2367
文章目录一、antd3上传图片二、antd4上传文件三、使用antdPro 之前一直在使用antd上传文件，图片，从antd3到antd4再到antdPro，总结一下经验吧 一、antd3上传图片 这里用的antd的版本是"antd": "^3.25.0", import React, { FC, forwardRef, useState, memo } from 'react'; import { Button, Icon, Upload as AntdUpload, Spin } from 'antd'
eclipse 如何查看ant版本
黄彪博客
12-04 4582
eclipse模式是自带ant工具的，由于某些脚本限定了ant的版本号和jdk的版本，导致无法运行ant，那么如何查看eclipse的ant的版本呢？   进入到eclipse的安装目录的plugins目录，如图所示       除了Java的系统属性，Ant还定义了一些自己的内置属性：  basedir project基目录的绝对路径 (与的basedir属性一样)。 ant
npm 查看所有antd版本号
weixin_50236973的博客
11-13 504
【代码】npm 查看所有antd版本号。
react create-react-app脚手架安装及查看版本
u014678583的博客
12-26 9278
create-react-app是业界最优秀的 React 应用开发工具之一，也就想相当于vue 的vue-cli。 查看create-react-app版本 create-react-app -V or create-react-app --version 安装及创建项目 // 全局安装 npm install -g create-react-app // 检查有没有安装成功，成功的话会返回一个版本号 create-react-app -V //构建一个react的项目antd-dem..
react查看版本和升级以及create-react-app升级
热门推荐
u014678583的博客
12-26 2万+
查看react版本及升级 当前的react版本在你的项目中的package.json文件查看 查看react最新版本 npm info react 在第一行中有最新版本号 安装react最新版 // @后面输入版本号 npm install --save react@17.0.1 create-react-app升级 第一步需要先查看create-react-app最新版本 npm info create-react-app 接着查看你当前的create-react-a
npm查看版本及安装命令
sg_knight的专栏
02-04 6235
1、npm查看组件版本： npm info antd 2、npm安装组件命令 npm install --save ant[email protected] --save表示安装到当前项目目录 @4.0.0指定安装组件版本号
npm 如何查看一个包的版本信息
忘川
11-11 8161
npm ls antd 查看本地已安装的版本信息 npm ls antd -g查看本地已全局安装的版本信息 npm view antd versions查看所有版本信息 npm view antd version查看最新版本信息 npm info antd 查看完整版本信息 1npm ls antd 查看本地已安装的版本信息 2 npm ls antd -g 查看本地已全局安装的版本信息 3 npm view antd versions 查看所有版本信息 4 n...
自搭的react、ant design脚手架
06-06
AntDesign@4.2.4 实现的webpack配置项 jsx、es6语法解析 开发服务 webpack-dev-server html模板，会自动引入打包的js less配置 css配置：打包压缩、自动添加浏览器前缀 图片字体等资源加载 AntDesign (不需要可以 ...
基于React和Ant Design的数据大屏展示设计源码
04-03
本设计源码提供了一个基于React和Ant Design的数据大屏展示系统。项目包含27个文件，主要使用JavaScript、CSS和HTML编程语言。文件类型包括7个JavaScript文件、7个Map文件、6个CSS样式文件、2个PNG图片文件、1个ICO...
2022-04-05 学习记录--React-React UI组件库-ant-design（蚂蚁金服）—— 按需引入样式 + 自定义主题
weixin_48850734的博客
04-09 3070
React-React UI组件库-ant-design（蚂蚁金服）—— 按需引入样式 + 自定义主题
【无标题】
i_NEEDYoU的博客
02-22 598
antd4 版本显示半中文半英文 自从antd4版本更新后，我的时间组件就是半中文半英文模式，一直没找到解决办法 去git上查看了一下，发现有不少人都有这样的问题。 https://github.com/ant-design/ant-design/issues/23891 也得到了解决办法： 查看本地package-lock.json 查找antd 和moment的两个组件中的moment版本 发现两个版本完全不一样 修改方法即为将moment版本与antd 中的moment版本保持一致 最后按照官网配置一
Ant Design Vue 相关介绍
飞扬小阁
12-16 1858
Ant Design Vue有三个版本： v1（vue2.x）：https://www.antdv.com/docs/vue/introduce-cn/ v2（vue3.x）：https://2x.antdv.com/docs/vue/introduce-cn/ v3（vue3.x）：https://next.antdv.com/docs/vue/introduce-cn/ ANTD PRO VUE https://pro.antdv.com/ package.json里看支持的是vue2.
Ant Design Pro的使用
AChaiYA的博客
03-26 1848
Ant Design Pro的使用 初始化： 开始使用 - Ant Design Pro 安装：npm install -g yarn 查看版本 ：>yarn --version (并行下载) 1.22.18 初始化：yarn create umi myapp 好的报错： yarn create v1.22.18 [1/4] Resolving packages... warning create-umi > sylvanas > @umijs/fabric > stylelint
Webpack项目学习：React-cli（脚手架）-优化配置 -antd样式(antdesign)+减小打包体积
weixin_47295886的博客
03-28 920
preProcessor对less-loader进行判断-是否存在。关闭性能提示 performance:false。给组件添加样式 button app.jsx。splitChunks进行单独打包。在main.js引入样式。并且引入less样式。
React中使用Ant Design
gsliwb的博客
04-02 489
React中使用Ant Design前言一、所需工具二、下载配置Node.js下载安装对应的版本二、配置React在VScode中安装React三、解析React中文件的作用四、Antd的使用一.功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与
picoCTF-Web Exploitation-Web Gauntlet
最新发布
huckers的博客
05-12 461
按照提示，需要用admin登录，查看filter.php，这应该是一个SQL注入题，提示我们可以使用无痕浏览器来以便cookie可以不用每次清除。中展示了sql过滤逻辑，可以回味一下，尝试用不同的关键字来注入。提示sql过滤or，我们使用。
react antdesign模版
05-28
React Ant Design 是一个基于 React 和 Ant Design 的 UI 组件库，可以帮助开发者快速构建美观、易用的 Web 应用程序。如果你需要使用 React Ant Design，可以使用 Ant Design 官方提供的 Create React App 模板来创建一个基于 React Ant Design 的项目，具体步骤如下： 1. 首先，你需要安装 Node.js，可以到官网下载安装包进行安装。 2. 打开终端，使用以下命令来安装 Create React App： ``` npm install -g create-react-app ``` 3. 创建一个新的 React Ant Design 项目： ``` npx create-react-app my-app --template ant-design ``` 其中，my-app 是你的项目名称，--template ant-design 表示使用 Ant Design 的模板来创建项目。 4. 进入项目目录，并启动开发服务器： ``` cd my-app npm start ``` 5. 打开浏览器，访问 http://localhost:3000，即可看到一个基于 React Ant Design 的网站。 这样，你就可以开始在项目中使用 React Ant Design 组件了。如果需要了解更多关于 React Ant Design 的使用方法，可以参考 Ant Design 官方文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值