文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React 入门学习（十三）-- antd 组件库的基本使用

大家好，我是小丞同学，一名大二的前端爱好者 这篇文章是学习 React 中 React antd组件库的学习笔记 非常感谢你的阅读，不对的地方欢迎指正 愿你忠于自己，热爱生活 引言...可以让我们快速开发，但是我们现在学习了 React ，一种组件化编程方式，很少说会去贴大量的 HTML 代码，再配一下 CSS，JS。...我们也有一些现成的组件库可以使用，我们只需要写一个组件标签即可调用。这让我们 React 开发变得十分的快速，方便和整洁。...Antd 组件基本使用 使用 Antd 组件非常的简单 引包 ----- 暴露 ---- 使用 首先我们通过组件库来实现一个简单的按钮 第一步 安装并引入 antd 包 使用命令下载这个组件库 yarn...@import '/node_modules/antd/dist/antd.less'; 注意一定要添加分号结尾，这是一个非常容易犯的错误 可见，我们成功的将主题色修改成了红色 antd ui组件库就记这么多

1.6K10
您找到你想要的搜索结果了吗？
是的
没有找到

React 入门学习（十三）-- antd 组件库的基本使用

大家好，我是小丞同学，一名大二的前端爱好者 这篇文章是学习 React 中 React antd组件库的学习笔记 非常感谢你的阅读，不对的地方欢迎指正 愿你忠于自己，热爱生活 引言...可以让我们快速开发，但是我们现在学习了 React ，一种组件化编程方式，很少说会去贴大量的 HTML 代码，再配一下 CSS，JS。...我们也有一些现成的组件库可以使用，我们只需要写一个组件标签即可调用。这让我们 React 开发变得十分的快速，方便和整洁。...Antd 组件基本使用 使用 Antd 组件非常的简单 引包 ----- 暴露 ---- 使用 首先我们通过组件库来实现一个简单的按钮 第一步 安装并引入 antd 包 使用命令下载这个组件库 yarn...@import '/node_modules/antd/dist/antd.less'; 注意一定要添加分号结尾，这是一个非常容易犯的错误 可见，我们成功的将主题色修改成了红色 antd ui组件库就记这么多

1.8K30

从零搭建基于react与ts的组件库（一）项目搭建与封装antd组件

根据低开引擎的物料封层模式，我的诉求是做一套组件库，并且将该组件库以umd方式生成。当然，从零开始开发组件库也是一个比较耗时耗力的事情，所以我想到将antd组件封装，于是催生出了本篇文章。...引入antd组件库作为底层原子组件库，并且r-ui.umd.js和r-ui.umd.css包含antd组件代码和样式代码。 依赖的react、react-dom模块以外部引用方式。...'), // 打包后的文件目录：根目录/dist/ library: 'rui', // 导出的UMD js会在window挂rui，即可以访问window.rui libraryTarget...根据我们的需求，我们希望将antd组件代码引用到我们组件内部进行封装，所以需要以dependencies方式引入： yarn add antd diff --git a/package.json b/...{ - color: @color; -} +@import "~antd/lib/button/style/index.css"; 引用antd的button组件 import * as React

75031

更可靠的 React 组件：组合及可重用性

组合 一个组合式组件是由更小的特定组件组合而成的 组合（composition）是一种通过将各组件联合在一起以创建更大组件的方式。组合是 React 的核心。 幸好，组合易于理解。...也就是说，组合的好处在于，通过允许子组件分别实现单一职责的方式，让 这样的组件也符合了单一职责原则。 可重用性 使用组合的组件也有可重用性的优点，可以重用通用的逻辑。...但享受可重用性也非毫无成本的。必须符合单一职责原则和合理的封装，才能说组件是可重用的。 符合单一职责原则是必须的： 重用一个组件实际上就意味着重用其职责 所以，只有唯一职责的组件最容易被重用。...检出 brillout/awesome-react-components 仓库，会发现一个编辑过的可重用组件菜单。 良好的库无疑会产生结构性的影响并推广最佳实践。...使用 可以将一个 URL 和一个组件联系起来。而后当用户访问匹配的 URL 时，路由将渲染相应的组件。 redux 和 react-redux 引入了单向且可预期的应用状态管理。

2.8K10

更可靠的 React 组件：清楚易懂的可表达性

原文摘自：https://dmitripavlutin.com/7-architectural-attributes-of-a-reliable-react-component/ 对于一个 意义明确（meaningful...） 的组件，是易于理解其行为的。...特殊化 组件越特殊，其名称中包含的单词可能就越多。 一个叫做 的组件表示一个头部的菜单；而叫做 的组件表示边栏中的一个菜单项。...比如，用 list 这个词表示一个渲染过的项目的集合。 为每个概念挑选一个词，并在整个应用中始终保持这种叙述。最终将形成一个由曾经使用过的 词语->概念 组成的可预测意图映射。...可表达性阶梯 我把组件的可表达性分为了 4 种层次。所处的层次越低，则理解组件需要付出的努力就越多。

49820

最好用的 6 个 React Tree select 树形组件测评与推荐

本文完整版：《最好用的 6 个 React Tree select 树形组件测评与推荐》 React 树形选择器（React tree select）组件在搭建 React 的 app 中特别常用，React...本文记录了我自己使用多年最好用的 6 款 React tree select 组件，每一款都经过我实际测试，推荐给大家。...图片 接下来介绍 6 款我自己常用的 React tree select第三方组件，它们各有特色，希望能帮你找到合适你的选择器 React Sortable Tree - 全功能，树状单选多选、可拖拽、...3.RC Tree - 资源管理器树状型选择器、可拖拽编辑、动态生成、icon 可换 图片 rc-tree 是一套 Win 资源管理器形的树状选择器 React 组件，用户可以在前端拖拽各个节点到新集合中...图片 5.React Dropdown Tree Select - 树形下拉菜单勾选选择器，是树形+checkbox+下拉选择器的合集组件 图片 react-dropdown-tree-select 可真是厉害了

5.1K10

React 折腾记 - (6) 基于React 16.6 + Antd 3.10.7封装的一个声明式的查询组件

前言 最近把新的后台系统写好了..用的是上篇文章的技术栈(mobx+react16); 但是感觉mobx没有想象中的好用,看到umi 2.x了.就着手又开始重构了......---- 抽离思路及实现 思路 合并props传递的值,尽可能的减少传递的东西(在组件内部实现默认值合并),把渲染的子组件通过遍历json去实现; 整个查询区域用的antd表单组件,聚合所有表单数据(自动双向绑定...内部的state默认初始化都为空[antd对于日期控件使用null来置空],外部初始化可以用getFieldDecorator的initialValue,已经暴露 ---- 实现的功能 支持的props...antd要求的格式一致,除了个别用来判断或者渲染子组件的, 字段解释: ctype(controller-type:控件类型) attr(控件支持的属性) field(受控表单控件的配置项) searchItem....亦或filed的字段名或之值丢失则不渲染该组件 // 若是为select或cascader没有子组件数据也跳过 const { ctype,

2.6K10

详细剖析｜袋鼠云数栈前端框架Antd 3.x 升级 4.x 的踩坑之路

2 月，伴随着数栈 UI5.0 的焕新升级，数栈前端团队一起将组件框架 antd 从 v3.x 升级到了 v4.x，更新组件的 UI，提升产品的交互体验，使数栈产品能够更加灵活地适应未来产品功能迭代的需求...通过这次 UI 升级和 antd 升级之后，Form 表单在数栈中的应用发生了较大的变化，从老版本的 label/component 横向排版改为了纵向改版，在横向空间不⾜的情况下，使⽤上下结构能有效提...rc-select-tree 是 rc-select 结合 tree 写的一个组件，相似但又不同，searchValue 就是其中一点，也不是没人提过 issue，只是人的忘性很大，时间长了就忘了、混淆了...・模块复用 在新版的 rc-select 中，antd 官方抽取了一个 generator 方法。它主要接收一个 OptionList 的自定义组件用于渲染下拉框部分。...通过这次 UI 升级和 antd 升级之后，表格在数栈中的应用发生了较大的变化，减⼩了表格默认⾼度，增加⼀屏可浏览的数据数量。

4K30

最好用的 5 个 React select 多选下拉菜单组件测评推荐

[最好用的 5 个 React select 多选下拉菜单组件测评推荐] 本文完整版：《最好用的 5 个 React select 多选下拉菜单组件测评推荐》 在 React 开发中，单选 / 下拉...这些高级功能都可以在第三方组件中找到，本文记录了我自己使用多年最好用的 6 款 React select 多选下拉组件，每一款都经过我实际测试，推荐给大家。...接下来介绍 6 款我自己常用的 React Select 第三方组件，它们各有特色，希望能帮你找到合适你的选择器 React Select - 多选下拉菜单王者组件库，覆盖多数应用场景 React multi...Select - 多选下拉菜单王者组件库，覆盖多数应用场景 [1React Select] React Select 可以说是 React 框架下最棒的 Select 多选下拉选择器了，不仅有常规的单选多选...零依赖 轻量级(<5KB) 可定制主题 使用 TypeScript 开发 扩展阅读：《6款顶级开源 React table 表格组件测评与推荐》 3.React Select Search - 支持模糊搜索

7.1K30

React 折腾记 - (9) 基于Antd+react-router-breadcrumbs-hoc封装一个小巧的面包屑组件

前言 没有什么技术难度,只是比官方的文档多了一丢丢的判断和改造; 用了react-router-breadcrumbs-hoc,约定式和配置式路由路由皆可用, 只要传入的符合规格的数据格式即可 ----...基础环境 React 16.4/UmiJS 2.2/Antd 3.x/ react-router-breadcrumbs-hoc 2.x: API简洁易懂 ---- 效果图 非antd风格 ?...---- 源码及实现 暴露的props: data: 面包屑的映射关系,数组(react-router-breadcrumbs-hoc要求的那种) 比如 : const routes = [{ path...: '/', breadcrumb: '首页' }]; 若是不传递的情况下,高阶组件(react-router-breadcrumbs-hoc)会自动获取路径名字为面包屑的名字 Breakcrumbs...,会抛出异常说您返回的是函数而非React.child, 解决就是我代码那样先缓存成组件,直接返回一个组件 有不对之处请留言,会及时修正,谢谢阅读..

2.8K10

类型即正义：TypeScript 从入门到实践（序章）

React 前端工程师学习路线[12]的一部分，欢迎来 Star 一波，鼓励我们继续创作出更好的教程，持续更新中~ 前提条件 确保你已经安装了 Node.js，可以访问官网安装：官网地址[13]。...引入 antd 组件库 实战驱动的技术学习能带给我们成就感，便捷好用的包可以加快我们的开发效率，好看的界面可以提高我们的审美能力，缓解学习疲劳。...在这篇教程的讲解过程中，我们将通过 Ant Design[17] 对应的 React 组件库 antd[18] 来辅助我们项目的编写，使得我们可以专注于讲解 TS 的核心知识，而不被繁杂的界面语言所干扰...babel-plugin-import：是配置可供开发者按需引用 antd 组件的一个 Babel 插件 less 和 less-loader：是我们用于定制化 antd 的主题需要的 Webpack...antd 组件库，并使用 react-app-rewired 替换默认的 react-scripts 来完成对 CRA 的 Webpack 配置进行修改，以是我们可以获得 antd 组件的按需引用和主题定制的功能

1.5K20

React项目依赖升级

当前问题 现在编译时间过长,镜像构建时长就达到了20分钟+ 通过项目依赖升级后,镜像构建时长大约3-5分钟 修改内容 之前的技术方案:roadhog(2.x)+antd(3.x)+React(16.x...)+dva(2.x) 现在的技术方案:[Create React App]craco(7.x)+antd(5.x)+React(18.x)+react-redux(9.x)+react-router(6...webpack配置来适应,但是roadhog暴露的配置入口比较少,很多配置无法设置,它自己也升级到了umi(https://github.com/umijs/umi) antd3.x中的Form组件使用比较麻烦...,dva也有相同的问题 下面是一个使用dva+Form的组件导出时的配置 export default connect(({ user, moon }) => ({ user, moon }))(Form.create...#基础的组件(整体布局等) ├── components #公共的组件 ├── hooks #钩子函数 ├── router #路由 ├──

15210

Ant Design 4.0 发布，来看看如何升级？

如果你仍在使用 React 15，请参考React 16 升级文档 其余 React 16 废弃生命周期 API 请参考 迁移导引 4.0 有哪些不兼容的变化 设计规范调整 行高从 1.5(21px)...React 最低支持版本为 React 16.9，部分组件开始使用 hooks 进行重构。 移除废弃的 API 移除了 LocaleProvider，请使用 ConfigProvider 替代。...移除了 Select 的 combobox 模式，请使用 AutoComplete 替代。 图标升级 在 antd@3.9.0 中，我们引入了 svg 图标（为何使用 svg 图标？）。...Grid 组件使用 flex 布局。 Button 的 danger 现在作为一个属性而不是按钮类型。 Input、Select 的 value 为 undefined 时改为非受控状态。...迁移工具修改详情 @ant-design/codemod-v4 会帮你迁移到 antd v4, 废弃的组件则通过 @ant-design/compatible 保持运行, 一般来说你无需手动迁移。

5.9K10

前端业务系统开发神器——定制化业务系统不过谈笑间，平平无奇在线开发纯前端业务系统设计

但是只有结构并不能成为完整的功能页面，所以还需要组件的联动、元素权限、状态的管理、接口调用等从生成的代码图中可以看出，组件的联动、元素权限由框架提供了支持，具体可以见 文档图片而页面状态的管理，在 react...) //定义loading //访问setLoading(true) //重新设值同样接口也可以创建后并访问/*定义一个查询接口名称为 search, 路径为 /user/select (因为baseURL...系统内基本的是 antd 的一些组件，也许你会用到富文本、图表、地图等等系统内没有的组件，那么我们可以将自己写的组件上传并使用，如：//一个按钮import React form 'react';export...如果那 1% 是正常 react 开发者可以完成，那成本依然是 1%，因为他就是一个正常的 react 项目 框架设计是使用 antd 的组件，其表单和表格与框架设计兼容并不友好，性能略微低于直接使用...antd。

82270

React Echarts 使用教程 - 如何在 React 中加入图表（内附数据看板实战搭建案例）

）》 Ehcarts 作为数据展示的组件，应用场景丰富，所以在 React 里引入 Echarts 图表是每个前端必会技能。...，在 index.js 导入 antd 的 样式文件 import "antd/dist/antd.min.css" 接下来就可以正式进入开发了，首先说明下我们要做的事情： 封装工具类，用来处理公共请求...，修改 App.js 如下: import { Row, Col, Select, Form } from "antd"; import { useState } from "react"; import...卡拉云可帮你快速搭建企业内部工具，下图为使用卡拉云搭建的内部广告投放监测系统，无需懂前端，仅需拖拽组件，10 分钟搞定。你也可以快速搭建一套属于你的后台管理工具。...开发者完全不用处理任何前端问题，只需简单拖拽，即可快速生成所需组件，可一键接入常见数据库及 API，根据引导简单几步打通前后端，数周的开发时间，缩短至 1 小时。

5.6K20

​年终盘点: 复盘20+基于React的开源管理后台&插件

5.Ant Design (Antd)是一个基于React技术栈的UI组件库,由蚂蚁金服前端团队开发和维护。Antd提供了丰富的组件和配套的设计规范,可以帮助开发者快速构建高质量的Web应用。...它的核心是QueryClient,它是一个全局状态管理器,可以帮助我们从多个组件中访问和共享数据查询结果。 该项目是为网络开发人员提供的高质量开源软件。...12.Mantis React Mantis 是一个免费开源的 React Redux 仪表板模板，使用 MUI React 组件库制作，旨在实现灵活性和更好的可定制性。...，也可适用于学习React时进行参考或练手的项目。...它是基于Redux架构的,提供了一种在React应用中高效管理状态的方式。 声明式设计：React 使创建交互式 UI 变得轻而易举。

61110

Ant Design的DatePicker日期组件不可选日期实现，让New Bing优化代码太棒了

antd（Ant Design）是一个基于 React 的UI组件库，它提供了丰富的组件和设计规范，可以帮助开发者快速构建高质量的前端应用。...DatePicker 是 antd 的日期选择器组件，支持弹出的日历面板，点击选择或输入日期。...本文将介绍如何使用 antd 的 DatePicker 组件设置不可选日期：根据 antd 官方示例实现后，让 New Bing 新必应优化代码，结果让我很惊喜。...Moment.js 的库，参考 antd 官方示例，代码如下：需要设置 begin 前和 end 后的日期不可选 import React, { useState } from 'react'; import...总结 本文介绍了如何使用 antd 的 DatePicker 组件设置不可选日期，以及如何自定义日期格式。

1.5K20
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券