Antd设计组件Avatar.Group抛出错误 - 腾讯云开发者社区

文章/答案/技术大牛

发布

这个组件库不似Antd、Element，设计理念太新颖了！

简要介绍 Shadcn UI 与其他 UI 和组件库如 Material UI、Ant Design、Element UI 的设计理念截然不同。...卓越的可访问性：Shadcn UI 在设计之初就充分考虑到了可访问性，确保其组件符合Web内容可访问性指南（WCAG）标准。...个性化品牌设计如果你的项目需要符合品牌视觉设计，Shadcn UI 是一个理想的选择。通过其灵活的样式系统，你可以轻松定制组件的外观，确保界面与品牌风格统一。...性能要求高的应用 Shadcn UI 的轻量化设计，使其非常适合对性能有严格要求的应用场景。电商平台、实时数据更新系统以及需要快速响应的单页应用（SPA）都能从中受益。...总结 Shadcn UI 是现代前端开发者不可多得的高效组件库，它结合了极简设计与高度可定制性，帮助开发者快速构建高性能、响应式的界面。

1.4K1 0

TDesign 更新周报（2022年1月第1周）

Layout.Aside 改动 AvatarGroup 使用方式为 Avatar.Group 详情见：https://github.com/Tencent/tdesign-react/releases...修复了 Tabs、Message、Dialog 等相关问题详情见：https://github.com/Tencent/tdesign-miniprogram/releases/tag/0.4.1 设计资源...Text：修复部分组件子类型命名有误的问题 Icon：修复引用错误 file 的问题重新梳理 Pages 框架，图标更改为独立内容 Sketch for Web 发布 1.0.2 修改开关组件大小...调整抽屉组件按钮位置 Sketch for Mobile 正式发布 1.0.0 Sketch for Mobile 正式发布 1.0.0 Axure for Web 发布 1.0.1 优化组件实现方式...，用 Axure 原生组件重新绘制了按钮、表单、list、标签等模块将文本样式内嵌到组件库中，可以快速调用根据最新视觉样式调整了颜色、图标、布局、导航等模块根据用户使用场景调整了组件库的整体结构和分组

1.1K4 0

您找到你想要的搜索结果了吗？

是的

没有找到

Hooks + TS 搭建一个任务管理系统（一）-- 登录注册页面

布局，主要是通过 Antd 组件来实现的 { isRegister ?...注册新账号'} 这里的 ShadowCard 其实是对 Antd 中的 Card 组件进行了加工，让它有了一些阴影，同时对它进行了一定的布局 // 组件加样式...首先从我们的调用上来看 run(login(values)) 我们只想传递一个 promise 对象就能获得所有的结果，首先我们需要先判断一下，传入的对象是不是 promise 对象，如果不是则直接抛出错误...loading 状态，这样我们可以通过这个值来实现请求 loading 的效果，最后我们返回一个 promise 对象的执行结果，在这个返回当中有很多值得探讨的地方为了获取到传入的 promise 对象抛出的错误...再扔一下 return Promise.reject(await err) }) .catch(error => { // 错误抛出了

1.7K1 1

「前端组件化」以Antd为例，快速打通UI组件开发的任督二脉

所以开发通用组件，参数设计是重要的一个环节。如果刚开始不是很擅长设计参数，可以参考Antd的参数设计，Antd的组件丰富且功能强大，所以参数考虑的也很周全。边学边练，效果更佳。...如图为Antd的Input输入框组件「平平无奇」的参数：Antd组件功能赏析电影有精彩片段赏析，Antd的组件很丰富，如果一一列举，详细介绍，可能我要写到下个月，所以我选了几个常见且基础的组件，来看看Antd...是怎么设计这些组件的。...步骤条状态，已完成、进行中、未开始、运行错误。两种展示方式，横向和纵向。不同展示类型，数值类、自定图标类、点状类。内容展示，标题、子标题、详情描述。...总结多看一些优秀的项目源码，可以帮助拓展开发思路，提升技术设计思维。现在有Antd等优秀的UI组件库，好像是不用重复造轮子了。但是奔着学习的目的，去开发一套UI组件还是可以帮助提升技术的。

2.8K1 0

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

3.x/ react-router-breadcrumbs-hoc 2.x: API简洁易懂 ---- 效果图非antd风格 ?...antd风格 ?...react-router-breadcrumbs-hoc要求的那种) 比如 : const routes = [{ path: '/', breadcrumb: '首页' }]; 若是不传递的情况下,高阶组件...import withBreadcrumbs from 'react-router-breadcrumbs-hoc'; import { Breadcrumb, Badge, Icon } from 'antd...,会抛出异常说您返回的是函数而非React.child, 解决就是我代码那样先缓存成组件,直接返回一个组件有不对之处请留言,会及时修正,谢谢阅读..

3.2K1 0

Ant Design学习(一)

基于『确定』和『自然』的设计价值观，通过模块化的解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。特性：提炼自企业级中后台产品的交互语言和视觉风格。...开箱即用的高质量 React 组件。使用 TypeScript 构建，提供完整的类型定义文件。全链路开发和设计工具体系。...2.2、开始使用 2.2.1、引入Ant Design Ant Design 是一个服务于企业级产品的设计体系，组件库是它的 React 实现，antd 被发布为一个 npm 包方便开发者安装并使用。...// 开启Ant Design功能 }] ] }; 2.2.2、小试牛刀接下来，我们开始使用antd的组件，以tabs组件为例，地址：https://ant.design/components/tabs-cn...组件的基本使用

1.1K1 0

修复 React 代码中烦人的 Warning

错误案例： ? img 常见的错误是，在使用 antd 的 table 组件时，每个列的 dataIndex 属性同时也会作为 key，注意两个列的 dataIndex 不要相同。...Props 类型错误 warning ? 组件接收的 props 类型与预定义的不符。错误案例 ?...这时如果不做额外的操作，param 参数也会被传入 Form 组件，它是一个意外的参数，这就会让 React 抛出 warning，我们可以做下面的处理： ?...componentWillReceiveProps componentWillUpdate 这些生命周期经常被误解或滥用，它们的潜在滥用可能会对异步渲染造成更大的问题，未来其会被逐渐弃用，现在使用如果没有加 UNSAFE_ 前缀，则会在控制台抛出错误...根据 React Fiber 的设计，一个组件的渲染被分为两个阶段：第一个阶段（也叫做 render 阶段）是可以被 React 打断的，一旦被打断，这阶段所做的所有事情都被废弃，当 React 处理完紧急的事情回来

2.8K3 0

dumi搭建react组件库

dumi官网搭建react组件库按照官网命令我们搭建一个组件库 mkdir vultures-react && cd vultures-react npx @umijs/create-dumi-lib...npm install npm start 安装所需依赖现在的组件库以及很成熟，我们可以跟据现有的组件库，例如antd、echarts二次封装成工作中用到的业务组件 // antd基础组件 npm...install antd -S // 拖拽组件库 npm install react-beautiful-dnd --save 根据自己的需要安装依赖组件库搭建第一个组件修改目录中的Foo文件 /...我们导入的事antd的组件库，怎么显示是普通的button标签，一起来排查一下这个错误吧。...打开控制台，看看antd的clas是否加上可以看到class的样式是有的，看来有可能是打包的css文件没有加载去官网查看，需要引入css样式在顶部加入 import 'antd/dist/antd.css

3390 0

精通ReactVue系列之手把手带你实现一个功能强大的通知提醒框(Notification)

前言本文是笔者写组件设计的第十篇文章, 今天带大家实现一个比较特殊的组件——通知提醒框(Notification)。...该组件在诸如Antd或者elementUI等第三方组件库中也都会出现,主要用来为用户提供系统通知信息的.我们在调用它时并不像其他组件一样，通过引入组件标签来调用。...并且我们都知道，antd或者element这种组件库，会自带一些主题状态，来提高用户的使用效率，比如会有success(成功状态)，warning(警告状态)，error(错误状态)，info(通知状态...Notification组件设计思路按照之前笔者总结的组件设计原则,我们第一步是要确认需求....icon图标部分采用笔者已经实现的Icon组件，具体用法和antd的Icon组件类似，如果想学习如何封装属于自己的Icon组件可以参考笔者源码。

2.4K1 0

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

大家好，我是小丞同学，一名大二的前端爱好者这篇文章是学习 React 中 React antd组件库的学习笔记非常感谢你的阅读，不对的地方欢迎指正愿你忠于自己，热爱生活引言...Antd 组件基本使用使用 Antd 组件非常的简单引包 ----- 暴露 ---- 使用首先我们通过组件库来实现一个简单的按钮第一步安装并引入 antd 包使用命令下载这个组件库 yarn...add antd 在我们需要使用的文件下引入，我这里是在 App.jsx 内引入 import { Button } from 'antd' 在引入的同时，暴露出要使用的组件名 Button 推荐去官方文档查看...，引入即可即可成功引入 antd 组件 2..../node_modules/antd/dist/antd.less'; 注意一定要添加分号结尾，这是一个非常容易犯的错误可见，我们成功的将主题色修改成了红色 antd ui组件库就记这么多，还有样式的按需引入没有记录

2.3K1 1

Antd源码浅析（一）Icon组件

故想深入源码了解一二，但鉴于技术浅薄，不敢深究，故写浅析，不喜勿喷，对其中的组件做一些分析，主要目的有两个：学习Ant Design的工程设计思路思考怎样写出优秀的React组件本文是基于Ant...Design3.4.4的源码分析，读者需要具备基本的JavaScript、React知识，对于Antd（以下用Antd表示Ant Design），蚂蚁官网给出的定位是”一个服务于企业级产品的设计体系”，...目录结构打开Antd源码目录，结构还是比较简洁：平时所用到的组件全部位于 components 文件夹下，首先我们分析一个简单的组件Icon，打开 components/icon ，目录结构如下：...classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux' // 忽略错误的数据类型...，我们就能直观的看到其实现原理了，可能部分读者对于TypeScript这块有些疑虑，可以简单理解为数据类型校验，这里我们能够学习到： Antd组件实现的基本结构和思路组件对于参数的校验的方式优雅的处理

2.4K3 0

react实战：umi问卷发布系统

/ antd-pro在antd的基础上，针对后台管理，抽取了更加详细的业务组件。...设计精美，遗憾的是，文档有点烂。 ? npm install ant-design-pro --save ---- umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架。...导航导航可引入antd的菜单( Menu)组件和umi的Link组件（ importLinkfrom"umi/link"）。...页面 antd-pro给我们提供了一个特别好用的组件Login，里面有优秀的语义化应用。...import axios from "axios"; import { notification } from "antd"; // 列举常见错误码 const codeMessage = {

6.1K3 0

从零开始学习React-引入Ant Design 组件（八）

React中使用Antd教程文档： https://ant.design/docs/react/getting-started-cn 介绍：antd 是基于 Ant Design 设计体系的 React...UI 组件库,一个方便极速开发应用的插件，这些相当于帮我们封装了常用的组件，我们直接拿来用就行。...步骤 1：安装Antd cnpm install antd --save ?.../asset/css/App.css'; 再引入需要用到文档里面的按钮组件 import Button from 'antd/es/button'; 在render()模板里面，复制按钮组件 render...继续使用一些评分组件 import React, { Component } from 'react'; //引入Antd import '..

1.9K3 0

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

3.2K3 0

前端异常的捕获与处理

异常处理在程序设计中的重要性是毋庸置疑的。任何有影响力的 Web 应用程序都需要一套完善的异常处理机制，但实际上，通常只有服务端团队会在异常处理机制上投入较大精力。...执行 JS 期间可能会发生的错误有很多类型。每种错误都有对应的错误类型，而当错误发生的时候就会抛出响应的错误对象。...onOk 使用普通函数时，函数内执行语句的 this 上下文为 Antd.Modal 组件的实例，而 Antd.Modal 组件不存在 changeFilterType 这个方法。...因为 React 组件是声明性的，所以 try-catch 不是一个可靠的选项。为了弥补这一点，React 实现了所谓的错误边界。...错误边界是 React 组件，它“捕获子组件树中的任何地方的 JavaScript 错误”，同时还记录错误并显示回退用户界面。

5.3K3 0

从零开始学习React-引入Ant Design 组件（八）

React中使用Antd教程文档： https://ant.design/docs/react/getting-started-cn 介绍：antd 是基于 Ant Design 设计体系的 React...UI 组件库,一个方便极速开发应用的插件，这些相当于帮我们封装了常用的组件，我们直接拿来用就行。...步骤 1：安装Antd cnpm install antd --save 2：全局css样式在react项目的css文件里面引入Antd的css @import '~antd/dist/antd.css.../asset/css/App.css'; 再引入需要用到文档里面的按钮组件 import Button from 'antd/es/button'; 在render()模板里面，复制按钮组件 render...继续使用一些评分组件 import React, { Component } from 'react'; //引入Antd import '..

6371 0

精通ReactVue系列之实现一个全局提示(Message)组件

每一个区块都可以自定义配置, 也可以组合其他组件.我们还可以配置全局提示出现在顶部的偏移量，类似于antd的组件一样。...并且我们都知道，antd或者element这种组件库，会自带一些主题状态，来提高用户的使用效率，比如会有success(成功状态)，warning(警告状态)，error(错误状态)，info(通知状态...Message组件设计思路按照之前笔者总结的组件设计原则,我们第一步是要确认需求....具体的设计细节可以参考我的上一篇Notification组件设计的文章。 2....antd同样的方式会这么调用： // antd Notification.info({//...})

4.1K1 0

快速学习Ant Design-入门

2.2 开始使用 2.2.1、引入Ant Design Ant Design 是一个服务于企业级产品的设计体系，组件库是它的 React 实现，antd 被发布为一个 npm 包方便开发者安装并使用。...在 umi 中，你可以通过在插件集 umi-plugin-react 中配置 antd 打开 antd 插件，antd 插件会帮你引入 antd 并实现按需编译。...config.js文件中进行配置： export default { plugins: [ ['umi‐plugin‐react', { dva: true, // 开启dva功能 antd...: true // 开启Ant Design功能 }] ] }; 2.2.2、小试牛刀接下来，我们开始使用antd的组件，以tabs组件为例，地址：https://ant.design/components...到此，我们已经掌握了antd组件的基本使用。

1.2K3 0

使用hel-micro制作远程antd、tdesign-react

hel-micro，模块联邦sdk化，免构建、热更新、工具链无关的微模块方案，欢迎关注与了解制作远程react图形组件库使用hel-micro模块联邦技术sdk化方案，基于react组件模板制作远程antd...hel-antd、hel-tdesign-react 两者制作过程完全一样，区别仅是安装的库不同，你可以参考此文将其他优秀的react图形组件库制作为对应的远程库，以下步骤以制作 hel-antd 为主.../subApp.ts 的 LIB_NAME 为 hel-antd（如不修改，构建时会报模块名不一致错误）- export const LIB_NAME = 'hel-tpl-remote-react-comps-ts.../TestExport';+ export default antd;注意此处额外导出了一个TestExport组件，用于示范可以扩展原始antd库加入自己的新组件function TestExport...src/entrance/libTypes.ts文件内容，单独导出antd的各个组件// 以下单个导出，支持 import { Button } from 'hel-antd'; 直接解构的语法+ export

1.3K2 0

Angular实战之使用NG-ZORRO创建一个企业级中后台框架（新手入门篇）

这篇文章就是为了让大家熟悉了解我们该如何在Angular项目中使用到NG-ZORRO UI组件库搭建后台管理框架。...NG-ZORRO介绍：官网地址：https://ng.ant.design/docs/introduce/zh ng-zorro-antd 是遵循 Ant Design 设计规范的 Angular...UI 组件库，主要用于研发企业级中后台产品。...手动安装ng-zorro-antd：安装组件： npm install ng-zorro-antd --save 如果上面命令安装失败，可以试试下面的cnpm安装： cnpm install ng-zorro-antd...@import "~ng-zorro-antd/ng-zorro-antd.less"; 引入组件模块：以下面的 NzButtonModule 模块为例，先引入组件模块： import { NgModule

4.4K1 1

点击加载更多

这个组件库不似Antd、Element，设计理念太新颖了！

TDesign 更新周报（2022年1月第1周）

Hooks + TS 搭建一个任务管理系统（一）-- 登录注册页面

「前端组件化」以Antd为例，快速打通UI组件开发的任督二脉

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

Ant Design学习(一)

修复 React 代码中烦人的 Warning

dumi搭建react组件库

精通ReactVue系列之手把手带你实现一个功能强大的通知提醒框(Notification)

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

Antd源码浅析（一）Icon组件

react实战：umi问卷发布系统

从零开始学习React-引入Ant Design 组件（八）

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

前端异常的捕获与处理

从零开始学习React-引入Ant Design 组件（八）

精通ReactVue系列之实现一个全局提示(Message)组件

快速学习Ant Design-入门

使用hel-micro制作远程antd、tdesign-react

Angular实战之使用NG-ZORRO创建一个企业级中后台框架（新手入门篇）

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐