React
文章平均质量分 73
青菜小王子
我向往自由
展开
-
「AntV」使用AntV X6实现流程编排设计器
基于AntV X6低成本定制能力:AntV X6是基于HTML和SVG的图表编辑引擎,提供了丰富的API和自定义事件,可以通过编写JavaScript代码,快速实现自定义的图表样式、布局和交互方式,满足具体业务需求。高度可扩展性:AntV X6提供了众多内置扩展,包括DAG图、ER图、流程图等应用,可以帮助你根据自己的需要,自由扩展和定制功能和组件,实现更加灵活的业务需求。原创 2023-07-05 19:43:42 · 9093 阅读 · 5 评论 -
hooks 源码浅析 — Scene
阅读ahooks中usePagination、useAntdTable、useFusionTable、useInfiniteScroll、useDynamicList等相关源代码,学习记录原创 2022-08-27 17:30:24 · 466 阅读 · 1 评论 -
React Ref
React 支持一个特殊的、可以附加到任何组件上的 ref 属性。此属性可以是一个对象(React 16.3)、或者一个回调函数、或者一个字符串(遗留 API)。interface RefObject<T> { readonly current: T | null;}type RefCallback<T> = { bivarianceHack(instance: T | null): void }["bivarianceHack"];type LegacyRef原创 2021-08-27 18:05:02 · 627 阅读 · 0 评论 -
表单组件数据到接口参数的数据结构转换
实际开发过程中,表单数据的数据结构与接口参数需要的数据结构往往存在些许差异,此时就需要一对一进行转化,那么如何做才显得优雅呢?举个例子:{ "select": "jack", "startDate": "2020-07-31T16:00:00.000Z", "endDate": "2020-07-31T16:00:00.000Z", "select": [ "a", "b" ],}{ "select": "jack", "startDate": "2020-07-31 16:原创 2020-08-06 16:16:38 · 505 阅读 · 0 评论 -
无限滚动组件
借助IntersectionObserver实现LoadMore组件,无限下拉加载数据。边界控制没有处理LoadMore.tsx:import React, { useEffect, useRef } from "react";import "./index.css";/**.load-more { height: 100px; background: #eee; text-align: center; line-height: 100px;}**/function Lo原创 2020-07-27 18:53:41 · 194 阅读 · 1 评论 -
解决React.forwardRef问题
在使用函数组件时,报错:Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()解决办法:将函数组件通过用forwradRef包装。//子组件function FancyButton(props, ref) ( return <button>Test</button>;);export原创 2020-05-21 19:14:01 · 6794 阅读 · 0 评论 -
Dawn构建的项目中使用React.lazy报错
使用【Dawn】构建工具开发项目过程中,使用到了React.lazy来进行代码分隔处理。遇到如下报错信息:Element type is invalid. Received a promise that resolves to: undefined. Lazy element type must resolve to a class or function.大概意思是:元素类型无效。 接收...原创 2019-06-04 18:15:22 · 3814 阅读 · 5 评论 -
抽奖程序(React)
介绍基于Ant Design组件库、Dva开发框架实现的一款抽奖App。动画使用了react-particles-js安装说明cnpm i 或者 npm i (建议前者)npm run startnpm run build使用说明点击主页面最左侧,弹出抽屉层,导入数据,或者修改路径为:http://localhost:8000/#/data返回主页面,点击Enter开始执行...原创 2019-01-20 12:16:47 · 1456 阅读 · 0 评论 -
解决Ant Design的样式和CSSModules冲突问题
项目中样式采用CSS Modules的写法,构建之后会被重命名。如果项目中引入了Ant Design的样式,则会导致样式加载不到问题。解决方式有两种:打包后在html中重新引入antd.css文件。但是无法做到按需加载,且打包的css文件中存在多余的内容。项目使用Dawn构建,配置webpack.config.js。代码如下module.exports = function (webp...原创 2019-01-03 14:46:18 · 5600 阅读 · 0 评论 -
迟到的2018年终总结
2017年年底,Android需求骤然停止。那段时间,我学习ReactNative,学习Python,购买了Android进阶的书籍,充实自己。我感觉我在Android领域到达了一个瓶颈,突破不了自己。【只是自我感觉】iOS小伙伴已然离职,我还是迷茫手足无措。技术更新迭代之快,无法想象。2017年年底,抱着学习的心态从Android转做前端React。我学习JS,学习相关技术栈,看不同的...原创 2019-01-03 15:44:50 · 874 阅读 · 0 评论 -
Tapable.plugin is deprecated. Use new API on `.hooks` instead
安装extract-text-webpack-plugin后,使用webpack构建的时候出现如下错误:Tapable.plugin is deprecated. Use new API on `.hooks` instead查阅Extract Text Plugin文档,其中已然说明:Since webpack v4 the extract-text-webpack-plugin s...原创 2018-12-02 20:56:53 · 904 阅读 · 0 评论 -
roadhog代理无效问题解决
使用Dva初始化项目后,在roadhogrc.mock.js文件中默认配置代理如下:export default { &quot;proxy&quot;: { &quot;/api&quot;: { &quot;target&quot;: &quot;http://jsonplaceholder.typicode.com/&quot;, &am原创 2018-12-02 13:34:14 · 2476 阅读 · 1 评论 -
Refs
Refs提供了一种访问DOM节点或在render方法中创建的React元素的方法。refs是React组件中非常特殊的props,可以附加在任何一个组件上。组件被调用时会新建一个该组件的实例,而refs就会指向这个实例。在react\lib\ReactBaseClasses.js文件中,可以看出每个组件都存在refs属性。/** * Base class helpers for the...原创 2018-10-21 21:21:13 · 708 阅读 · 0 评论 -
Context与Store结合
借助于context的跨级通信能力,可以将store管理数据的模式应用于每个组件当中。即将store通过context传递到子组件,一方面子组件可以通过store.dispatch()触发store中数据更新,另一方面子组件可以通过store.getState()方法获取最终的更新状态,刷新UI。Redux解读React之Context1.目录结构制作一个更换主题色的App参考【结合 ...原创 2018-10-28 17:53:21 · 1249 阅读 · 0 评论 -
React之Context
组件间通信大致有以下三种情况:父组件向子组件通信子组件向父组件通信跨级组件通信父组件向子组件通信这是最常见的一种通信方式,即父组件通过props向子组件传递需要的信息。子组件向父组件通信利用回调函数可以实现通信,即父组件将一个函数作为 props 传递给子组件,子组件调用该回调函数,便可以向父组件通信。跨级组件通信所谓跨级组件通信,就是父组件向子组件的子组件通信,向更深层的子...原创 2018-10-28 17:02:26 · 271 阅读 · 0 评论