随笔分类 -  react

摘要：从 React 16.8 开始，React 经历了 3 次主要的大版本更新，分别是 React 17、React 18 和 React 19。 以下是这三个版本的核心变化概览： 🚀 React 17 (2020年10月) 这是一个过渡版本，官方没有引入任何新的、面向开发者的功能。 核心定位：为未来 阅读全文

摘要：1 Cannot find module '@/components/Footer' from 'src/pages/user/Login/index.jsx' jest.config.js加上moduleNameMapper可解决。 参考：https://stackoverflow.com/que 阅读全文

摘要：单元测试做什么 编写用来做单元测试的js文件，并执行。 适合对谁做： 存放静态方法的js文件，如utils/utils.js 页面组件，即React Component 不适合对谁做： 模板自带的js文件（不需要做改动，而且这种一般跑单测会有问题） 单元测试文件的特点： 一般有特定名称，如*.tes 阅读全文

摘要：直接上代码。 import React, {PureComponent} from 'react'; import {useState, useEffect, useRef, useMemo} from 'react'; import { connect } from 'dva'; import { 阅读全文

摘要：如果你在 Marker 里面加一个 Popup 。 这个东西会自动加一个点击出现的事件。 而我想改成鼠标放上去出现，离开时消失。 上代码。（请粘贴到 https://react-leaflet.js.org/ 的编辑器中查看） const position = [51.505, -0.09] fun 阅读全文

摘要：就是说，这个checkbox只是展示一个勾勾，不需要做交互。 上代码。 const { Checkbox } = antd; function onChange(e) { console.log(`checked = ${e.target.checked}`); } ReactDOM.render( 阅读全文

摘要：上代码。 const { Tree } = antd; const { TreeNode } = Tree; const treeData = [ { title: '0-0', key: '0-0', children: [ { title: '0-0-0', key: '0-0-0', chil 阅读全文

摘要：原因其实很简单。 <Tree onSelect={handleTreeClick} defaultExpandedKeys={[rootOrgId]}> {this.renderTreeNodes(OrgTreeData.children)} </Tree> renderTreeNodes = da 阅读全文

摘要：import { Select } from 'antd'; const { Option } = Select; function onChange(value) { console.log(`selected ${value}`); } function onBlur() { console.l 阅读全文

摘要：首先。vue 的数据流是双向的，而 react 的数据流是单向的。 这意味着什么？ 这意味着，vue 中，子组件可以用 emit 把数据更新传给父组件。而 react 中， 需要通过父组件把回调函数传给子组件实现类似功能。 为什么要说这个？因为框架的设计会影响到组件库的设计。组件库的设计必须配合框架 阅读全文

摘要：用表单上传组件最痛苦的地方是： 他的诸多行为与纯上传组件不一样，而表单的文档关于这一块基本上没有提，只能自己试。 比如我想做一个上传前的拦截。 beforeUpload: (file, fileList) => { const isJpgOrPng = file.type 'image/jpeg' 阅读全文

摘要：有一个需求是日期选择需要加一个日期限制。 于是我兴高采烈的加上去了。 // 日期可选判断方法 disabledDateFunc = current => { const { disabledDateArray } = this.state; if (disabledDateArray) { retu 阅读全文

摘要：重新装了一个项目的依赖，结果发现打不开了？ 报错如下： This dependency was not found: * webpack-theme-color-replacer/client in ./src/components/SettingDrawer/themeColor.js To in 阅读全文

摘要：上代码。 组件的Js文件。 import React, { Component } from "react"; import Style from './myYearSelect.less' function getOffsetTop(el){ return el.offsetParent ? el 阅读全文

摘要：这个问题来源于日期选择器 RangerPicker 的特殊情况。 <Col span={7} key={9}> <FormItem label="投运时间" {...formItemLayout2}> {getFieldDecorator('tysj', { initialValue: [undef 阅读全文

摘要：前后端分离开发时，一般会使用mock。 因为mock是用node运行的，行为与调用后台一致。 这样，不需要等后台写好，只要有接口文档，前端可以自己调接口，这样联调时遇到的问题会少很多，可以加快整体开发效率。 而mock作为模拟数据自然也可以做分页，用Js的方法即可。 只要传入正确的分页参数就可以分页 阅读全文

摘要：应当指出，antd 是有 ztree 组件的，但是太简单，无法满足复杂的业务需求。 所以我还是决定使用zTree. 注意这个 jquery-vendor.js。它是让 zTree 可以正常工作的代码。因为 zTree 并没有考虑到 node 环境的问题——它假定 jQuery 一定在 window 阅读全文

摘要：有一个需求是这样的。 一个组件里若干个区块。区块数量不定。 区块里面是一个正六边形组件，而这个用 SVG 和 canvas 都可以。我选择 canvas。 所以就变成了在 react 中使用 canvas 的问题。 canvas 和 SVG 有一个很大的不同。 SVG 是标签，所以HTML怎么整，S 阅读全文

摘要：有一个需求是这样的。 一个组件里若干个区块。区块数量不定。 区块里面是一个波浪效果组件，而这个一般用 SVG 做。 所以就变成了在 react 中使用 SVG 的问题。 首先是波浪效果需要的样式。 引入样式，以及组件文件的结构。 一个组件文件里可能有很多层组件，只需要输出最外面的一层。 SVG 组件 阅读全文

摘要：需求是这样的。 有一个需要显示若干方块型元素的小区域 数量比较少的时候显示一排 数量比较多的时候显示两排 用 grid 不好，因为当数量为奇数的时候需要两排里面的元素都乖乖的居中显示。 用 flex 的话，直接写需要写很多判断，因为行数不同的时候页面结构也会不同。 所以，我想到用二维数组（矩阵）来表 阅读全文