解决ant-design刷新存在缓存问题
1、在使用ant-design-mobile的ListView組件的时候，我遇到的问题是当进行拉动刷新时，页面数据并没有完全的刷新清空，所以我遇到产生一系列的问题。2、这时候我就想到了去找强制刷新页面的方法或者React重新render的方法，但是用于react-app上又有些特殊性，所以以上两种方法并没有产生作用。反而会引起app上刷新空白登问题。3、因为基于dva.js开发，所以想到另外一种方法就是直接在model进行数据同步处理，定义一个方法将要处理的数据清空即可。代码示例在model定义一
‘reactdom‘ is not defined.mountnode is not defined 解决办法
在使用ant-design的组件时，会遇到一下两个错误，这里分享下我找到的解决方法。‘reactdom’ is not defined.`1、在头部引入import ReactDOM from 'react-dom';mountnode is not defined2、替换写法const EditableFormTable = Form.create()(EditableTable);// ReactDOM.render(<EditableFormTable />, mountN
JS中对象转数组案例解析
以一次实际开发中的实例，将几种对象转数组的方法都试了一遍： // const errorList = Object.keys(error) // console.log('error', error) // console.log('Array.from', Array.from(error)) // console.log('keys',Object.keys(error)) // console.log('values',Object.val
react中使用splice函数去删除数组的某一项
1、splice函数splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。slice() 方法可从已有的数组中返回选定的元素。所以，在使用的时候，就要注意的是：splice返回的是被删除的项目2、举一个我在react中使用的小案例：完成的功能是删除数组的某一项：这里我需要更新的应该是我截取后的数组 // 删除 deleteSelect = (index) => { const { initSelectInputList } = this.state
react-ant-design实现可拖拽可编辑的表格功能
1、 需求功能：表格可进行拖拽，点击编辑的时候可进行编辑，前两个是input输入框，后面是下拉选择框，可增加可删除。2、查看ant-design组件的时候，会发现拖拽和可编辑表格是两种类型表格。所以我的实现思路是，为了避免两种类型表格杂在一起带来的不确定问题，所以直接引入两种表格，通过变量去控制区使用哪种表格。当我需要拖拽的时候渲染拖拽表格，当我要编辑的时候渲染编辑表格，使用共同的数据即可。3、具体实现代码因人而异，这里我只给出部分觉得可以帮助大家的代码区分渲染编辑状态时是输入框还是下拉选择框
react中函数带（）和不带（）引发的问题
1、在一次使用react-ant-design-mobile组件的时候，由一个函数定义引发的BUG。代码如下这里要实现的功能是，定义一个Toast回调函数，在提示之后进行一系列操作。错误写法 }).then(() => { Toast.success('发布成功', 1, this.onClose()); }); } onClose = () => { ........ }正确写法 也就是去掉this.onClose的括号，其
reduce方法实现对数组相邻相同元素进行合并
1、 业务需求：渲染一个表格数据，对相同元素进行合并单元格。2、这里我们需要判断数组前一个元素是否和后一个元素相同，如果相同就进行合并，并且给出重复出现的数值。实现代码这里主要用到了reduce方法,下面代码是对数组进行处理，不同的数组结构处理方法就是不同。 function getNewCourseList(list) { list.map(item => { item.courseList.map(courseListItem => {
ant-design树选择框生成treeData数据结构
1、使用TreeSelect组件时，我们需要根据接口返回的数据生成官方样例的数组结构2、这里主要是分享代码，代码有根据具体情况命名进行修改，仅供参考 const classGradesData = []; // eslint-disable-next-line no-unused-expressions classTypeSet && classTypeSet.forEach((item, idex) => { // 生成children
解决ant-design表格固行和列多出空白列的问题
1、问题描述在使用表格组件的时候，使用固定列，可能会遇到当你表头内容小于你设定的值时，会多出一列空白的问题。2、解决以上问题只需要我们动态的去判断当有多少列的时候需要去固定列这个属性。3、4、...
react-ant-design输入框输入时拼音字符触发onChange事件处理
1、在我们做输入框时，一般会进行字数限定，但是会发现输入拼音的时候，拼音字符也会一直触发onchange事件，导致也会让我们的判断失效。2、下面的方法也是我自己搜索得来，其实场景比较复杂。我的应用场景是非受控的组件下处理。直接在Input中加入handleComposition事件，这个事件内含三种状态：start-update-end；分别对应着开始输入，正在输入，结束输入三种状态。所以我把我的判断移入到这个事件中进行判断。3、具体场景可自行去搜索更详细的解答，这里分享我的代码 // 处理将字
关于For循环中将let替换成var的原因，我觉得这是最好的回答
for 循环中的 let 声明在 let 出现之前，for 循环定义的迭代变量会渗透到循环体外部：for (var i = 0; i < 5; ++i) { // 循环逻辑 } console.log(i); // 5 改成使用 let 之后，这个问题就消失了，因为迭代变量的作用域仅限于 for 循环块内部：for (let i = 0; i < 5; ++i) { // 循环逻辑} console.log(i); // ReferenceError: i 没有定义在.
react-setState更新机制--源码解析
1、摘自《深入React技术栈》2、setState 异步更新React 初学者常会写出 this.state.value = 1 这样的代码，这是完全错误的写法。注意 绝对不要直接修改 this.state，这不仅是一种低效的做法，而且很有可能会被之后的操作替换。setState 通过一个队列机制实现 state 更新。当执行 setState 时，会将需要更新的 state 合并后放入**状态队列**，而不会立刻更新 this.state，队列机制可以高效地批量更新 state。如果不通过
React 合成事件与 JavaScript 原生事件对比
下面我们从 4 个方面来对比 React 合成事件与 JavaScript 原生事件。1、 事件传播与阻止事件传播浏览器原生 DOM 事件的传播可以分为 3 个阶段：事件捕获阶段、目标对象在这里插入代码片本身的事件处理程序调用以及事件冒泡。事件捕获会优先调用结构树最外层的元素上绑定的事件监听器，然后依次向内调用，一直调用到目标元素上的事件监听器为止。可以在将 e.addEventListener() 的第三个参数设置为 true 时，为元素 e 注册捕获事件处理程序，并且在事件传播的第一个阶段
react中使用index作为key值会怎样?
**key**写动态子组件的时候，如果没有给动态子项添加 key prop，则会报一个警告：Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of 'App'. See https://fb.me/react-warning-keys for more information. 这个警告指的是，如果每一个子组件是一个数组或迭代器的话，那么必须有
React -JSX中样式的像素值还需要加上px吗?
样式中的像素值当设置 width 和 height 这类与大小有关的样式时，大部分会以像素为单位，此时若重复输入 px，会很麻烦。为了提高效率，React 会自动对这样的属性添加 px。比如：// 渲染成 height: 10px const style = { height: 10 }; ReactDOM.render(<Component style={style}>Hello</Component>, mountNode); 注意，有些属性除了支持 px 为单位的
ant-design 搜索框单独监听allowClear事件
1、2、在方法中打印event.target.tagNametest = (e) => { console.log(event.target.tagName)}你会发现allowClear和Search打印出来是不一样的
CSS怎么画“凹““凸“?
1、这里我们利用到的CSSwidth属性的首选最小宽度特性。所谓“首选最小宽度”，指的是元素最适合的最小宽度。2、在 CSS 世界中，图片和文字的权重要远大于布局，因此，CSS 的设计者显然是不会让图文在 width:auto 时宽度变成 0 的，此时所表现的宽度就是“首选最小宽度”。具体表现规则如下。• 东亚文字（如中文）最小宽度为每个汉字的宽度，如图 3-11 所示的 14。 • 西方文字最小宽度由特定的连续的英文字符单元决定。并不是所有的英文字符都会组成连续单元，一般会终止于空格（普
使用instanceof去检测数组的弊端是什么？
使用instanceof去检测数组的弊端是什么？一般我们说去检测数组，会使用到if (value instanceof Array){ // 操作数组}使用这一方法可能大家很少会注意到会有什么问题。这也是我看书看到的，所以分享给大家。虽然这很少见到使用 `instanceof` 的问题是假定只有一个全局执行上下文。如果网页里有多个框架，则可能涉及两个不同的全局执行上下文，因此就会有两个不同版本的 Array 构造函数。如果要把数组从一个框架传给另一个框架，则这个数组的构造函数将有别于在
数组迭代器方法拆分键值对的小Tip
数组迭代器方法拆分键值对的小Tip使用 ES6 的解构可以非常容易地在循环中拆分键/值对const a = ["foo", "bar", "baz", "qux"]; for (const [idx, element] of a.entries()) { alert(idx); alert(element); } // 0 // foo // 1 // bar // 2 // baz // 3 // qux真是niceeeeeeeeeeeeee!...
ant-design RangePicker时间选择框默认值设置处理
1、基础，直接上代码，不作过多解释// 做这个处理是为了避免出现invalid date const lastStart = deepStartDate === '' || deepStartDate === undefined ? deepStartDate : moment(deepStartDate); const lastEnd = deepEndDate === '' || deepEndDate === undefined ? deepEndDate :
今日推荐
周排行