antd

注：options：为数据源 defaultValues：默认显示的选中项 注： displayRender={(labels, selectedOptions) => this.displayRender(labels, selectedOptions)} 是用来控制选择后的title显示，因为我们将label改成了一个对象，所以 defaultValue={defaultValues} 不会生效， value={defaultValues} 也同样不生效

因为现在公司的主要技术栈是React,所以也想着能够搭建一个好的React前端框架，方便在工作中使用；框架在打包过程也做了优化，多线程，拆包，缓存等等手段提升打包速度和质量。主要用到的库包括： 创建带TypeScript模板的react-app，推荐使用yarn,接下来我也主要以yarn做例子 然后在项目根目录创建一个 craco.config.js 用于修改默认配置。antd按需加载以及自定义主题 重新打包就可以了， 所有的主题配置在这里噢 这里利用React-router做路由，同时也会根据用户角色，做权限处理；只有当角色和路由允许的角色一致时才可以访问和展示。 新建router下新建indext.tsx 用于渲染页面 引入Router/index.tsx 新建hasPermission.ts,如果页面 roles 包括用户的角色则返回true,在渲染menu和子页面的时候就根据这个值渲染页面。 比如Home页面，渲染子页面的逻辑： 在这里 SubPages1 下面的 page1 就无法展示出来和访问，如果直接输入路由也会访问页面不存在，因为page1允许的角色 user 而我们角色是 admin 所以无法展示。useImmer 很好的解决了ReactHooks中的赋值的性能问题，可以单独更新某个对象的某个属性。 上面的赋值方法也可以写到一起,效果是一样的： Umi Hooks 是一个 React Hooks 库，致力提供常用且高质量的 Hooks。提供了非常多的Hooks组件，比如上面使用的 usePersistFn ，他的作用：在某些场景中，你可能会需要用 useCallback 记住一个回调，但由于内部函数必须经常重新创建，记忆效果不是很好，导致子组件重复 render。对于超级复杂的子组件，重新渲染会对性能造成影响。通过 usePersistFn ，可以保证函数地址永远不会变化。Umi Hooks功能还是非常强大的，有很多功能很强大的API。大家可以去官方文档看看 https://hooks.umijs.org/zh-CN/hooks/life-cycle/use-update-effect 。 自定义 hooks 其实在我们的开发工作中，还是很常遇到的。 hooks 的好处就是可以抽离公共方法，像组件一样的随意使用，对于快节奏的开发工作还是很舒服的，比如你觉得 react hooks 或者 umi hooks 的api，不能满足自己的需求，也可以自己创新一些api。我这里举个例子，大家写 class 组件写的很多的话，会经常用的 this.setState() ，大家都知道 this.setState() 是异步执行，你无法直接拿到最新的 state 。 hooks 中的 useState 同样也是异步的，你无法直接获取到最新的 state ，所以我自己写了一个 useSetState 方法，用于在修改完状态后能够立即拿到最新的 state 。 我们在src/hooks文件夹下新建 useSetState.ts 使用的方式也很简单，基本和useState一致，只是在setState的时候提供一个回调函数。 这就完成了带回调的 useSetState hooks 的编写，不过这种写法不太推荐在 hooks 中使用，建议需要获取最新的数值都在 useEffect 或者 useUpdateEffect(umi hooks) 中去。 状态管理选择的Mobx,Mobx和Redux我都用过，不过当我习惯用Mobx后，就感觉还是Mobx更方便一些，所以更喜欢在项目中用Mobx,现在Mobx已经更新到5.0版本了，不过5.0版本并不支持ie11，所以如果想要兼容性可以选择4.0的版本，或者Redux。 这里推荐一个针对Mobx的库， mobx-react-lite :它是基于 React 16.8 和 Hooks 的 MobX 的轻量级React绑定。 这个主要影响的是调用方法的形式，对于Mobx的书写是一样的，比如写一个加减数值： 这里你的typeScirpt可能会编译不了，会报错：Experimental support for decorators is a feature that is subject to change in a future release. Set the "experimentalDecorators" option in your "tsconfig" or "jsconfig" to remove this warning. 解决方法是在 tsconfig.json 加入配置： 完毕以后，一定要把 storeProvider 包裹所需要共享状态的页面，我这里直接放到app.tsx 剩下来就仅仅是调用的事情了： 此外axios的配置应该大家都知道，所以我这也不多说了，具体在我的源码里面也有，utils下的axios.ts 加入了打包分析 webpack-bundle-analyzer speed-measure-webpack-plugin 加入了打包进度条 webpackbar 加入了打包压缩 compression-webpack-plugin terser-webpack-plugin 还对包进行拆包 开发环境的域名代理 devServer 加快打包速度，还可以考虑删除antd-icons，单独去iconfont网站下，按需引入。不然打包会费很多时间 引入dotenv-cli 新增开发环境配置文件 .env.development 和 .env.production 两个文件 然后修改package.json中的启动脚本： 现在 yarn start 或者 yarn build 就会根据环境配置来处理。 还有一些细节的调整，会尽力将这个框架更加完善的。 github地址： https://github.com/Benzic/React-typescript-umihooks-mobx 欢迎star 和提意见

antd的TimePicker时间选择框不能定义超过 23时、59分及59秒 对于普通的时间选择足以应付，但如果对于赛事相关的时间选择就很不方便，赛事通常以90分钟这种量级计算，那么TimePicker就不能满足我们的需求了 所以我使用select组件重新制作了一下，效果如下 虽然很不完善，不过大体算满足了需求，实现起来也很简单，把四个select组件拼接一下就ok了 render中的循环创建option 样式就根据个人喜好自己制作吧

关于antd中 react 的 form 表单的赋值和重置的问题 如果你的表单后续需要重置，那么在给表单赋值的时候，需要用 以上说明：表单在赋值时不要用 setState 给表单赋 initValues, 这样很可能会使表单的值无法清空，下面是错误的使用方式

filterTreeNode：是否根据输入项进行筛选，默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值 function(inputValue: string, treeNode: TreeNode) (函数需要返回 bool 值)

现在业务上有个需求，需要表格内某项库存数量为0时，该行背景变为红色 根据Antd 的官方文档，查看相关的API antd Table 首先定义好需要的类名 然后根据条件判断添加类名 最后效果

Ant Design Of React 是基于 React 的一套UI组件库，React 框架虽然不提倡嵌套使用 jQuery 但是还是可以用的。

文档中已经说明了content的类型是element or string, 因此可以:content: (<p>Hello <br /> world.</p>)

给每一列一个固定的宽度，比如你的单号和时间这种就可以设置为能显示最长字符的宽度。退订号码这种也限制一个宽度，不够的情况下让他自动换行。

Next.js中不能直接使用css，需要我们自行解决： （1）需要安装 @zeit/next-css ： npm install --save @zeit/next-css （2）安装成功，需要在根目录建立 next.config.js (3)重启项目 （1）先安装Ant Design 库： npm install --save antd （2）再安装babel-plugin-import： npm install --save babel-plugin-import 目的：只加载项目中用到的模块，这就需要我们用到一个 babel-plugin-import 文件，配置好了 .babelrc 就不会把Ant Design打包到生产环境。 （3）重启项目 （4）在需要的页面引入

拼写错误吧

封装: TO-3P基本参数：晶体管类型:IGBT集电极直流电流:50A饱和电压, Vce sat 最大:2.5V最大功耗:312W电压, Vceo:1200V工作温度范围:-55°C to +150°C封装类型:TO-3PSVHC(高度关注物质):Cobalt dichloride (18-Jun-2010)上升时间:50ns功率, Pd:312W功耗:312W封装类型:TO-3P晶体管极性:NPN最大连续电流, Ic:50A电压, Vces:1200V电流, Ic @ Vce饱和:25A电流, Icm 脉冲:75A表面安装器件:通孔安装SVHC(高度关注物质)(附加):Bis (2-ethyl(hexyl)phthalate) (DEHP) (18-Jun-2010)

操作方法是：1、在乱码网页中点击右键。2、在弹出菜单中选择【编码】。3、在【编码】下级菜单中选择Unicode(UTF-8)或中文（简体）(GBK)试试。目前大部分中文网页都是这两种编码。网页乱码出现通常是因为网页开发者没有按照规范来设置网页编码，浏览器打开这类网页的时候自动按照默认的编码来打开导致的。

antd的select、DatePicker、TreeSelect、AutoComplete组件需要注意页面滚动会导致下拉框也随之移动，如下图：日期组件可以通过getCalendarContainer属性来控制下拉框显示位置。具体使用getCalendarContainer={trigger => trigger.parentNode} 其它组件通过getPopupContainer来阻止下拉框随页面滚动，写法同上

需求： 由于业务需要，表单过大的问题，我把表单和提交按钮分开成了两个组件，如图： 解决思路： 1.点击按钮时告知父级这一行为： 按钮组件 传送门： https://www.kancloud.cn/ppyy321/react/273596 2.父级接收子组件传递的信息 子组件接收到这个方法后把this回传给父组件，this.child是父组件接收到的this挂载到child上面，这样子this.child就是子组件的this，如此就能直接操作子组件了 传送门： https://juejin.im/post/5c26137d5188257dc54af75c 4.最后一步：我们就能在父组件里直接操作子组件的提交事件啦 这是我的解决方法，写的有点乱，如果有更好的解决方法，欢迎分享~

antd v4 使用hook对组件进行了升级，react项目使用hook的话升级v4会比较好。 antd V4 提供了一个 codemod cli 工具 @ant-design/codemod-v4 以帮助快速升级到 v4 版本。 废弃的组件则通过 @ant-design/compatible 保持运行（从 @ant-design/compatible 引入的老版本 Form 组件，样式类名会从 .ant-form 变成 .ant-legacy-form）如果进行了样式覆盖，需要进行调整。 通过 npx 直接运行 npx -p @ant-design/codemod-v4 antd4-codemod src 或者全局安装 使用 npm npm i -g @ant-design/codemod-v4 或者使用 yarn yarn global add @ant-design/codemod-v4 antd4-codemod src 以上升级完成 需要注意组件配色问题，如进行了样式覆盖需要对应处理。

Element-ui是饿了么旗下出的一款 为设计师、开发者、产品经理开发的基于Vue的桌面端UI组件库；Antd是 蚂蚁金服 出的一款服务于企业级产品的设计，更专注于用户体验。个人建议：小项目用Element-ui；大项目用Antd

antd中的表格可以监听更深层次的对象。antd 可编辑的table 组件，点击提交后数组中还会有数据，在input中使用过onInput，onChange，onBlur，ref绑定，在form表单的input框内输入的值不能被form获取，导致输入了内容依然会报未输入现象。input框实时监听清空红色input框的数据。

对于label和content的宽度，我们想着table中每一行中每一个td可以设置百分比的宽度，总和为100%即可 有时设置width不起作用。加上 display:table-cell； 设置width并超出显示省略号，官网给出讨论 https://github.com/ant-design/ant-design/issues/13825 当书写render时，当此列没有key值时，render的参数为(record),当有key值时，render的参数为(text,render) 官网给出的行选中 常用写法： 单选的时候,可简化handleRowClick： 上述选中的可以显示为20，只在下拉选项时添加“页/条” 问题描述： 最后一列为操作列，固定在最右边，随着项目复杂，从3个操作增加为4个了，然后紧跟在操作列前面的一列筛选列的筛选图标被遮挡了，不明白为啥。。。。？ 问题解决：最终发现，是只给操作增加了内容，没有增加操作列的宽度导致的，所以增加操作列的宽度到合适即可。 一般都是除了导航和查询的地方，剩下的地方container全部是table的，此时洗完滚动根据container的高度自适应变化而调整，而且不滚动时，分页在页面最底部,此时需要增加样式： 将table配置中 scroll: { y: "calc(100% - 46px)" } ,46是因为每行高是46 此时左或右固定时滚动会出现错位，增加样式： 每个formitem中只能写一个校验 参见例子 一行写两个 Row一行，Col两个即两列总共24 上述选中的可以显示为20页/条 描述一个自己思路转不过来的坑----- 问题描述： 往往optionDatas是一个对象数组，同时，显示的是text，value是一个id之类的值，但是在选中值后，我们某时会需要取得选中的这条数据中的其他值如params，此时，思路需要转坑---value可以改， value={index} , handleChange 时，选中的 params 为 optionDatas[index].params ; （复杂(或者多个select时）时可以使用 value={ {index} } ，此时split("-")可以拿到id和index。） Dropdown的menu是一个组件时，点击item之后，下拉框并不会自动收起，解决办法，Dropdown和menu写在一个组件中。

近期在开发团队官网的过程中碰到了需要运用表单的场景，去年学习React时是通过网上的视频教程自学的，课程的小demo中用户输入数据的收集是通过input框，结合ref实现的，因此形成了思维定式，每一次收集用户数据都用这种方式。一个偶然的机会才猛然想起使用表单，功能开发完后写下此文，记录这次学习的内容。 Form.useForm()：创建form控制实例，不提供时会自动创建 onFinish：提交表单且数据验证成功后回调事件 validateFields：触发表单校验 getFieldValue：获取表单指定字段的值 name：字段名，在getFieldValue传入这个值可以获取字段的数据 label：字段的标签 关于Antd表单的内容有补充时另写。 通过在form标签或其提交按钮中的action、method、submit等属性来提交表单 通过js中调用submit函数提交表单，action、method等属性在form标签中定义 通过DOM技术收集表单数据，再作为请求的query或body提交。 1、刷新 form提交，在更新数据完成后，会转到一个空白页面再对原页面进行提交后处理，即便是提交给自己本身的页面，从这点来说form提交用户体验较差；AJAX是局部刷新，不会跳转，刷新效率更高，用户体验更好。 2、支持 form只支持GET/POST两种请求。 3、适用场景 form适合前后端不分离项目；AJAX适合前后端分离项目。 参考资料和原文

Antd 提供的 TreeSelect树形选择非常好用，但是有一个问题：节点选择。场景一：当底层child 节点数为多个时 可以正常选择，但是为1时，会自动选择到父节点上，怎么办？场景二：当我想要选择2级child节点时，选中的却是3级child节点，该如何解决？解决这个问题的关键在于 灵活使用一个属性：showCheckedStrategy（默认是子节点） u26a0ufe0f注意：这个对象的值是枚举类型 SHOW_ALL: 显示所有选中节点(包括父节点) SHOW_PARENT: 只显示父节点(当父节点下所有子节点都选中时） SHOW_CHILD ：只显示子节点个人推荐使用三元运算 灵活改变节点取值，这样能在项目中满足多个不同等级账户的使用需求。

工作中使用antd需要对其样式进行一些修改，一开始以为直接在组件上加入className就好，但发现在好的情况下完全不可取，问了对这个比较熟悉，恍然大悟，记录下来，映像好点 修改样式无法两种情况，全局样式修改，局部样式修改 下面我就已一个按钮组件为例子来写个demo 特点： 虽然你是在当前目录下的less或css文件修改了，但是全局生效的，建议如果有全局修改的需求，放到global.less的文件中修改，并做好注释。 如：我这边修改按钮组件的样式 注意：这里就要提到css modules的一个类名加载机制了，上面应该看到了，最外层有个类 为 lqDemo ，因为css modules 的机制是，如果你不使用它，那就不会进行加载。所以无论如果需要在外面加上一个class类，进行使用，否则仅仅引用是不会生效的 这个时候就需要用到css的作用域了 像这样嵌套在:global下就好了 哈哈哈 是不是就解决了，其实还有其它的方式，但我觉得这种方式是最好的

能。antd是基于AntDesign设计体系的ReactUI组件库，主要用于研发企业级中后台产品。在antd中能对图标加点击事件，需要运用click：（）操作，使用console语句即可显示加上的点击事件了。

react没有v-model这种双向绑定指令。所以要想实现双向绑定，就需要给输入框一个默认的value，并且通过change监听事件去改变value来达到双向绑定的目的。 在antd的表单组件中。如果给每个item组件设置了name。那么就不需要去手动实现双向绑定了。只需要通过 form.setFieldsValue方法。将对应的数据传过去。from组件就会根据对应的name和字段名来双向绑定。 可以通过Form.useForm()来拿到整个from对象。 form.resetFields()方法可以重置整个表单的数据。 form.validateFields()触发表单验证，并返回表单数据。 在使用antd的日期组件时，发现直接给组件指定年月日的日期格式的数据时，会报错 date.clone方法未定义。官网指明，antd的日期组件是依赖moment库实现的，并且指定默认值的时候也需要传入moment格式的日期。所以只需要将需要传入的日期用momentI()方法转一下格式就行了

使用ANTD（ant design）开发需要安装Node.JS，cnpm，tyarn，umi等包。yarn是npm的替代品，正如tyarn取代cnpm。在未来的项目中我们会使用tyarn进行JS的包管理。 Node.JS安装成功后，在安装路径下有 npm 命令脚本。npm是Node.JS的包管理器，可以使用npm命令安装各种所需的包。但由于npm包的默认安装源在国外，速度慢，因此需将安装源映射在国内。需要安装cnpm和tyarn。

曾经作为一阵子网页前端，根据我的经验，阿里的这个Antd是一个开源的前端框架，使用它可以比较轻松的通过代码实现一些网页特效，让页面更加好看。再加上有阿里旗下的蚂蚁金服在后面背书，所以有很多商业网站和企业网站甚至政府网站都在使用Antd。由于Antd本身是开源的，所有代码任何人都看得见，所以使用它的开发者都默认为它是一个干净、安全的框架。却没想到，Antd的一位维护人员不知道出于什么想法，在9月10日提交了一个“彩蛋”，它的作用是在12月25日当天，为所有使用Antd框架的网页中的表单提交按钮，增加了一个“飘云”的特效，当鼠标移动到按钮上是还会显示“Hohoho”的文字提示。按理说，给提交按钮增加这样一个特效无关大雅。但需要注意的是，前面已经提到，很多政府、企业网站都在使用Antd的框架，而这些网站很多都是极其严肃的，并不适合这些玩笑似的“彩蛋”。尤其是这一彩蛋被设定在12月25日这天出现，指向性的含义非常明显，因此给不少网站的维护人员带来了很大的麻烦，甚至据说还有前端因此而丢掉饭碗。一开始，这一彩蛋的提交者还认为这不是什么大事，直到不少开发者通过各种社交软件“炮轰”，才在github发表了一个不痛不痒的声明，称是在自己的“一意孤行且愚蠢的决定”。而这次事件也给广大开发中敲响了警钟。一直以来，很多开发者认为“开源”的东西一定的安全的，因为所有代码对外开放，任何人都可以查看。但是当一些大型的开源项目涉及到很多行代码的时候，不一定有开发者能够完整的阅读所有的开源代码。而且像Antd这样由团队负责运营的开源项目，很多时候默认就是安全的，人们使用它就是为了提高工作效率，不大可能把所有代码都读一遍。这就使得一些开源项目存在了隐患的可能。这次仅仅只是加入了一个彩蛋，如果下次增加点后门什么的，后果不堪设想。尽管由于Antd是开源项目，根据协议即使这一彩蛋给开发者带来困扰甚至害人丢了工作，开发者也很难追究添加彩蛋的运营人员的责任，因为开发者在使用Antd框架的时候并没有付费，该框架也并非用于盈利。但是这一事件也给Antd项目的声誉造成了严重的负面影响，一些开发者已经着手在网站页面中将Antd框架删除。总而言之，这次“彩蛋事件”虽然是个别人员的非主观恶意造成的，但是却给整个开源社区带来了一场“信任危机”。

I DO my sth

antd 官方的Descriptions用法是这样的 效果图如下 但是有个需求是，根据传入的字段判断，决定Descriptions.Item的渲染 这里加了个Fragment包裹，发现效果出不来，这两个Descriptions.Item重叠在一起，而且样式全乱了， 把Fragment换成div了还是没用 最后解决方法是一个一个来