Ant Design Pro V5 - jest 单元测试踩坑记录
摘要：1 Cannot find module '@/components/Footer' from 'src/pages/user/Login/index.jsx' jest.config.js加上moduleNameMapper可解决。 参考：https://stackoverflow.com/que
阅读全文
posted @ 2021-07-08 20:49
随笔分类 - react
web前端单元测试入门，以Ant Design Pro为例
摘要：单元测试做什么 编写用来做单元测试的js文件，并执行。 适合对谁做： 存放静态方法的js文件，如utils/utils.js 页面组件，即React Component 不适合对谁做： 模板自带的js文件（不需要做改动，而且这种一般跑单测会有问题） 单元测试文件的特点： 一般有特定名称，如*.tes
阅读全文
posted @ 2021-07-08 19:50
react-leftlet 实战：一个demo
摘要：直接上代码。 import React, {PureComponent} from 'react'; import {useState, useEffect, useRef, useMemo} from 'react'; import { connect } from 'dva'; import {
阅读全文
posted @ 2020-12-15 23:24
react-leaflet 实战：Marker Popup 改成触摸触发
摘要：如果你在 Marker 里面加一个 Popup 。 这个东西会自动加一个点击出现的事件。 而我想改成鼠标放上去出现，离开时消失。 上代码。（请粘贴到 https://react-leaflet.js.org/ 的编辑器中查看） const position = [51.505, -0.09] fun
阅读全文
posted @ 2020-12-09 23:42
antd实战：静态的checkbox
摘要：就是说，这个checkbox只是展示一个勾勾，不需要做交互。 上代码。 const { Checkbox } = antd; function onChange(e) { console.log(`checked = ${e.target.checked}`); } ReactDOM.render(
阅读全文
posted @ 2020-12-09 21:33
antd实战：只有最下一级可以选择且只能单选的树组件
摘要：上代码。 const { Tree } = antd; const { TreeNode } = Tree; const treeData = [ { title: '0-0', key: '0-0', children: [ { title: '0-0-0', key: '0-0-0', chil
阅读全文
posted @ 2020-12-08 22:52
antd 踩坑：为什么 Tree defaultExpandAll defaultExpandedKeys 在刷新后会失效？
摘要：原因其实很简单。 <Tree onSelect={handleTreeClick} defaultExpandedKeys={[rootOrgId]}> {this.renderTreeNodes(OrgTreeData.children)} </Tree> renderTreeNodes = da
阅读全文
posted @ 2020-08-11 20:07
antd踩坑： Select 模糊搜索
摘要：import { Select } from 'antd'; const { Option } = Select; function onChange(value) { console.log(`selected ${value}`); } function onBlur() { console.l
阅读全文
posted @ 2020-08-11 20:00
antd4 源码学习 ：表单
摘要：首先。vue 的数据流是双向的，而 react 的数据流是单向的。 这意味着什么？ 这意味着，vue 中，子组件可以用 emit 把数据更新传给父组件。而 react 中， 需要通过父组件把回调函数传给子组件实现类似功能。 为什么要说这个？因为框架的设计会影响到组件库的设计。组件库的设计必须配合框架
阅读全文
posted @ 2020-07-19 16:19
antd实战：表单上传，文件列表的过滤与限制。
摘要：用表单上传组件最痛苦的地方是： 他的诸多行为与纯上传组件不一样，而表单的文档关于这一块基本上没有提，只能自己试。 比如我想做一个上传前的拦截。 beforeUpload: (file, fileList) => { const isJpgOrPng = file.type 'image/jpeg'
阅读全文
posted @ 2020-04-14 11:20
antd踩坑：日期选择器的可选日期控制的问题
摘要：有一个需求是日期选择需要加一个日期限制。 于是我兴高采烈的加上去了。 // 日期可选判断方法 disabledDateFunc = current => { const { disabledDateArray } = this.state; if (disabledDateArray) { retu
阅读全文
posted @ 2020-04-14 11:12
ant design pro : 依赖项 webpack-theme-color-replacer 最新版导致项目无法启动？
摘要：重新装了一个项目的依赖，结果发现打不开了？ 报错如下： This dependency was not found: * webpack-theme-color-replacer/client in ./src/components/SettingDrawer/themeColor.js To in
阅读全文
posted @ 2020-03-05 19:42
react 实战：写一个年份选择器
摘要：上代码。 组件的Js文件。 import React, { Component } from "react"; import Style from './myYearSelect.less' function getOffsetTop(el){ return el.offsetParent ? el
阅读全文
posted @ 2020-02-16 20:33
antd踩坑：value.locale is not a function
摘要：这个问题来源于日期选择器 RangerPicker 的特殊情况。 <Col span={7} key={9}> <FormItem label="投运时间" {...formItemLayout2}> {getFieldDecorator('tysj', { initialValue: [undef
阅读全文
posted @ 2020-02-02 14:39
Mock分页
摘要：前后端分离开发时，一般会使用mock。 因为mock是用node运行的，行为与调用后台一致。 这样，不需要等后台写好，只要有接口文档，前端可以自己调接口，这样联调时遇到的问题会少很多，可以加快整体开发效率。 而mock作为模拟数据自然也可以做分页，用Js的方法即可。 只要传入正确的分页参数就可以分页
阅读全文
posted @ 2020-01-05 16:47
ant design pro 实战 : 使用 ztree
摘要：应当指出，antd 是有 ztree 组件的，但是太简单，无法满足复杂的业务需求。 所以我还是决定使用zTree. 注意这个 jquery-vendor.js。它是让 zTree 可以正常工作的代码。因为 zTree 并没有考虑到 node 环境的问题——它假定 jQuery 一定在 window
阅读全文
posted @ 2020-01-01 20:59
react实战 : react 与 canvas
摘要：有一个需求是这样的。 一个组件里若干个区块。区块数量不定。 区块里面是一个正六边形组件，而这个用 SVG 和 canvas 都可以。我选择 canvas。 所以就变成了在 react 中使用 canvas 的问题。 canvas 和 SVG 有一个很大的不同。 SVG 是标签，所以HTML怎么整，S
阅读全文
posted @ 2019-11-26 16:35
react实战 : react 与 svg
摘要：有一个需求是这样的。 一个组件里若干个区块。区块数量不定。 区块里面是一个波浪效果组件，而这个一般用 SVG 做。 所以就变成了在 react 中使用 SVG 的问题。 首先是波浪效果需要的样式。 引入样式，以及组件文件的结构。 一个组件文件里可能有很多层组件，只需要输出最外面的一层。 SVG 组件
阅读全文
posted @ 2019-11-26 10:22
react实战 : 用矩阵思想做一个自适应布局容器组件
摘要：需求是这样的。 有一个需要显示若干方块型元素的小区域 数量比较少的时候显示一排 数量比较多的时候显示两排 用 grid 不好，因为当数量为奇数的时候需要两排里面的元素都乖乖的居中显示。 用 flex 的话，直接写需要写很多判断，因为行数不同的时候页面结构也会不同。 所以，我想到用二维数组（矩阵）来表
阅读全文
posted @ 2019-11-19 22:43
react : umi 引入 antd 踩坑
摘要：首先要明确一个问题。 不管是 antd 还是 dva 还是别的什么东西，他们都是 umi 的插件——只要这个项目是使用 umi 脚手架生成的。 所以第一步应该是 .umirc.js (config.js) 的配置。 把 antd 的布局UI的代码粘到 Layouts 中。 请记住： Layouts
阅读全文
posted @ 2019-11-04 13:50
