- 博客(52)
- 收藏
- 关注
RSS订阅原创 @react-native/metro-config同时配置多项config
我的react native项目中，想让react-native-postcss-transformer和react-native-svg-transformer第三方插件同时生效。在metro.config分别配置两顶时没有问题，但将两个配置合并到一个里时，却无法同时有效。mergeConfig无法配置(configA, configB, configC);
2024-04-02 16:56:31
193
原创 react的useState异步处理最新数据的写法
在异步操作时直接拿config是拿不到最新值的，所以setConfig(config++)在多个异步方法中调用之后，结果也还是为1，因为在方法运行之前它们就是0。需要修改成setConfig(config => config + 1)，才会在最新值上加1。例如：const [config, setConfig] = useState(0);本来不想记的，但几次遇到之后还是会突然卡壳一下，回忆不起它的写法。
2024-02-27 15:11:19
349
原创 react的sass模块化引入
今天新项目在sass的模块化引入上耗费了好长时间，因为一使用import styles from "./index.module.scss";就报错，让我以为是缺少了什么模块的引入或webpack之类又缺少什么配置。直到我把报错关闭，用F12看了一眼css后发现它其实是正常引用了！只是编译器不认识而已！所以最终问题原来出在少写了个声明，typings.d.ts文件里加上declare module '*.scss';
2023-12-08 15:22:51
545
原创 微信小程序的无限瀑布流写法
微信小程序的无限瀑布流实现总算做完了，换了好几种方法，过程中出现了各种BUG。首先官方有瀑布流的插件（Skyline /grid-view），不是原生的我就不想引入，因为我的方块流页面已经搭好了，引入说不定就要涉及样式的修改、代码量的增大等麻烦问题。H5我虽然也做了瀑布流，但是是用绝对定位来做的，性能消耗有点大。所以小程序这边就是想把原本flex固定宽高的改成两列。（纯CSS就不要想了，根本不可能实现，虽然也查到了新的css瀑布流规则，但绝大部分浏览器不支持也是白搭。）
2023-09-25 11:07:55
1858
2
原创 tinymce变化后onchange光标变化问题（React）
由于我是ant design pro包了一层，它给分配的value和onchange，不用的话，确实也不会有这问题，但那样form提交表单时，虽然编辑器里已经变化，但获取不到变化值。最后想了想它为什么会这么跳的原理，是因为onchange之后，改变了value值，导致组件又重新渲染了内容，所以只要value值不变，其实就不会有这问题。就是编辑几个字之后，再点击一下才会触发onchange，也就是说点到别的地方光标会先跳回来一次，再点击一次才正常……比如回车、复制粘贴，都会跳到最前面。
2023-05-24 11:12:20
1294
1
原创 不用flex改成grid，div之间只加内边框
之前我习惯于flex布局，但每次遇到产品设计内边框的时候，总得用些特殊的CSS，把最边上的给排除，挺麻烦的。直到发现了grid居然可以只加内框（当然，外边框也可以加）
2023-04-10 09:54:34
173
原创 ant design pro + umi4的动态菜单与动态路由
参考：https://blog.csdn.net/weixin_43294560/article/details/107447241。之后还将子路由routes为[]时，把父结点也清除的数据处理，以及使用patchClientRoutes来修改默认路由跳转，而原本routes.ts配置的路转就可以删除了。先说说我浪费了大量时间使用的处理方式：因为曾经的项目是umi3的，所以我就想原样搬过来，结果发现，布局页BasicLayout的子children不见了！
2023-04-07 10:20:10
4203
5
原创 将ant design pro打包的JS分离出去
最后还是在umi的官网文档里翻到了headScripts，确实是能通过这个参数来解决现有顺序问题。通过analyze分析发现其实react-dom并不算小，有100多kb，所以就想把它单独引用。搜了半天，也只找到过时的答案：使用chunks: ['vendors', 'umi'],来排序。结果发现，umi.js比react.js要先引入，umi找不到react肯定就失败了。但新版umi把chunks直接就砍掉了，无法使用。于是就在config.ts增加。
2023-03-08 17:36:51
315
原创 记录一下用过的正则表达式
正则真的是个常用常忘的东西，虽然经常一搜就能搜到结果，但再次想用的时候又要重蹈覆辙，更别说有时候需要多翻才能翻到想找的。
2022-11-10 09:59:43
304
原创 lodash获取对象数组中某个参数的值
lodash好用是好用，但是方法太多，想找对应的方法花的时间有点多。例如，我想获取对象数组中所有的id值，搜到个const result = _.mapValues(list[0], (value, key) => _.map(list, key));的方法。它的结果其实是{ id: [1, 2, 3, 4], name: ["n1", "n2", "n3", "n4"] }而我要的结果，只需const result = _.map(list, 'id') 就足够了。...
2022-08-02 17:18:06
5319
原创 react获取原生form下的参数
本来是个很简单的问题，结果一搜，要么是在input的value里把内容给塞了个变量进去，要么就是清一色的antd的Form表单，用什么getFieldsValue这种已经包装过的方法获取，根本不是原生方法！把from对象拿出来一看，原来只要对应name名下的value直接拿出来就可以了。...
2022-07-30 16:50:43
326
原创 一波三折的react + less
本来只是想实现一个less的模块化功能，网上查到很多方法说要react-scripts eject！想着我也没折腾过webpack.config.js也就试试，结果……加完以后发现，单纯引用less可以，但是模块化不行？！又找了半天，发现之前的“攻略”里缺了个modules: true,。加完后确实可以模块化引import styles from './index.less';，但是原本的全局配置类又失效了！加上对eject出来一堆完全用不到的东西越看越不顺眼，干脆推倒重来。本来我......
2022-06-29 15:43:27
824
原创 Ant Design Pro修改页面meta标签
Ant Design Pro非常不适合公司自用项目开发，其自定义设置的学习成本非常高，之前用Casader时，想修改数据获取id的同时获取name都做不到，还得自己修改onChange和初始数据找对应name。今天又被修改meta困惑了近1小时。一开始我想应该找顶部html直接加上，结果——没有，然后查到routes的配置里可以加meta，结果——无效。然后在其github搜了好久都没找到有人提相关的问题。最后个人认定肯定是在config里怎么能配置，结果发现defineConfig引用的包原来是umi
2022-04-13 16:36:09
850
3
原创 图片自适应的各种问题
问题：不同长宽的div中放大小不定的图片（比例不能扭曲），需要默认使用同一个png透明默认图片，加上自定义的背景色，等之后渲染真实图片时，再替换。因为项目图片需要懒加载，图片只能放在img中。我第一反应是外面套个flex，然后双向居中就完事，但是这样图片会产生留边。.lazy-div{ width: 不一; height: 不一; background: #e1e2e4; display: flex; overflow: hidden; align-
2022-02-08 16:37:07
713
原创 把底部导航栏固定在底部
在一个老项目中，突然发现它底下的footer居然是用js去固定的，在页面加载后和窗体变动的时，去判定它位置是否超过界面总高度，以此添加position: fixed的css来固定在最底部。这种方式即过时又存在BUG，有一个页面本身高度不够，通过JQuery请求到了参数之后，高度又超了，此时的$(window).resize并不会触发，导致了部分内容被遮挡。所以这种问题就应该通过纯css来解决...
2022-01-12 14:31:57
2470
原创 VS Code没有Resources Root功能？
已经习惯了使用VS Code做前端开发，而在新公司前后端未分离的旧项目里却用的是IntelliJ IDEA。因为用的Maven管理多个项目，如果单独跑web项目的话，会出现jar包依赖找不到。但如果根目录为多个项目的总目录话，跑web项目又会报各种奇怪的错误，比如：The maximum number of tolerable server reconnection errors has been reachedThe bean xxx.FeignClientSpecification could
2021-12-24 11:15:14
874
原创 error Command failed with exit code 1.
从传统JQuery转变到Node.js最烦的就是一接手新项目就得npm install，浪费大量时间不说还总会报莫明其妙的错误，这次又遇到了一个error Command failed with exit code 1。因为它的相关处报的问题可能和npm本身有关，我就用yarn install规避，并且也确实能yarn start跑通项目。但就在我想把它打包成dist的时候，yarn build就又抛出了这么一个问题。网上找了很多解决方式都不对，最后在一篇文章里看到说yarn build本质上和npm
2021-12-17 09:24:43
21660
4
原创 如何彻底删除word、excel中最近使用的文档
本来是件很简单的事，但百度一搜，全是掩耳盗铃的结果，什么设置->高级里把它置为0。那根本就不是删除！只是隐藏！把0再改回去，历史记录又会出现。搜了半天中文没结果，突然想到这不应该去搜英文么！第一个页面居然还和中文一样在自欺欺人，第二个页面看到图的一瞬间我就懂了！https://www.techjunkie.com/clear-recent-documents-microsoft-word/这么简单的一个功能中文结果里全是这里抄来那里抄去，还不能解决问题，真浪费时间。.
2021-03-30 17:01:39
2222
原创 vscode使用git branch太长导致无法结束的问题
使用vocode我都习惯于在它软件下敲命令，但随着分支越建越多，当分支超过显示高度时再敲 git branch就会出现一个问题：最后一行敲回车还是ctrl+c，还是esc，都结束不了这个状态。所以我一直以为这是BUG，采用把界面拉高，删除多余分支，新建一个终端的方式来解决。直到今天我才发现……原来它的关闭按钮是Q，真是太不智能了！也没个提示！...
2021-03-26 10:43:08
630
原创 mapbox叠加图层的图片，实现鼠标移至实现变化
首先找到的是这段代码： map.addLayer({ id: "id", type: "symbol", source: "source", "source-layer": sourceLayer, "layout": { "icon-image": ['case', [">", "weight", 1], "img1", "img2"], // 重点！ ...
2021-03-11 16:35:13
1299
3
原创 craco中使用px2rem，进行px转rem，解决分辨率适配问题
因为我的项目里一开始只有：module.exports = { plugins: [ { plugin: require("craco-cesium")() }, ]};所以我一直在plugins里尝试，怎么把webpack示例的：{ loader: require.resolve('postcss-loader'), options: { ident: 'postcss', plugins: () => [ r
2020-11-10 10:44:24
2026
2
原创 js 删除数组中某属性的对象
理论上来说这应该是个很常见的方法，我却搜了好些关键字都没搜出来，索性自己写一个：statList是个对象数组； for(let i = 0; i < statList.length; i++){ if(statList[i].isHide){ statList.splice(statList.findIndex(item => item.isHide), 1); i--; } }但这段代码总觉...
2020-09-21 18:27:23
1179
原创 storybook增加实时交互代码修改显示结果（React+TypeScript）
总结一下storybook增加实时交互代码修改显示结果，自动生成API的Demo页的操作。（React+TypeScript架构）对比图：vs第一步，由于我先前使用的storybook是3.4.1，而参考的例子：https://wix-style-react.now.sh/ 是5.3.19，差了两个大版本，为了避免麻烦我先把已用到的相关插件一块升级，涉及：@types/storybook__addon-actions、@types/storybook__react、file-loader、t
2020-05-28 14:54:34
1160
原创 HEX对应的透明度问题
平常一直是用谷歌浏览器调试css的颜色，所以HEX的末两位是透明度。但今天对接一个服务，发现末两位怎么调都不对，搜了一下才发现，原来还有前两位是透明度的情况……
2020-05-12 18:48:44
1081
原创 linux下服务get请求发生400的问题
今天遇到个郁闷的问题，平时在windows系统一直跑得好好的服务，在linux下图片请求出问题了……报了个莫名其妙的400问题。虽然我也怀疑问题出在params={%22cols%22:%22{\%22id\%22:6}%22}参数上，但把引号怎么改都改不通……其实中途我用postman试了，那边也是正常的，还怀疑过是不是要传数据格式，但这是浏览器直接url访问哪来的数据格式调整。最后才发现真正问题在于转码，把它整个用encodeURIComponent全转码成params=%7B%22cols%22%
2020-05-08 18:43:26
557
1
原创 React与hook的二三事
本来新出的hook应该是个好用的东西，但是我在组件中使用没有任何问题，项目去引用这组件时却报了个：Invalid hook call. Hooks can only be called inside of the body of a function component.首先判定是不是版本问题，把组件和项目都重安了一遍react的包，而且都是同一个版本，还报这个错……算了，不浪费时间找...
2020-04-29 18:42:43
147
原创 XMLHttpRequest的POST同步请求代码
原生JS的异步POST请求回调代码如下：function test(url, param, callback) { var xmlhttp = new XMLHttpRequest(); xmlhttp.open("POST", url, true); xmlhttp.setRequestHeader("Content-Type", "application/json;c...
2019-12-20 16:12:05
2126
原创 rollup打包组件的dist下没有src导致项目引用找不到……
一个自己写的组件npm run build执行rollup的打包，虽然没有报错，但是dist下没有src，导致项目引用的时候找不到……我记得之前写新组件时也遇到了这种问题，一直以为是源码的src写得不对，删这删那发现还是没有src……rollup.config.js文件下好像也没什么要改的……翻原组件详细对比后发现，真正的问题在于根目录下的test文件下有个空的test.tsx文件，虽然这...
2019-11-01 18:30:11
1084
原创 npm install安装包后，运行npm start提示的版本冲突
真烦npm install的前端，运行一个同事的项目要么装得超级超级慢，要么装了以后说引用包有冲突，npm intall成功后，npm start却跑不起来。To fix the dependency tree, try following the steps below in the exact order: 1. Delete package-lock.json (not pack...
2019-10-31 13:07:58
1955
原创 nodejs跨域请求涉及到的一些问题
自己试了好久，终于把node.js的代理问题弄清了个大概。首先我本地项目在跨域方面会先请求一个options，成功后才会请求post，于是我一开始在代理中用的代码：const express = require('express');const app = express();app.use('/print/*', proxy({ target: 'http://localhos...
2019-10-24 18:09:42
209
原创 接口数据格式引发的问题
折磨我4个多小时的代理问题终于解决了，原本以为只要把之前写的代理复制粘贴改个IP端口就好，谁知它老是请求错误。明明POSTMAN请求原端口好好的，一请求代理就发生怪事：x-www-form-urlencoded不能，而form-data是通的……莫非是我原代码请求的方式不对？于是我把原代码加上{headers: {'Content-Type': 'multipart/form-data'}}，...
2019-08-09 01:00:57
1993
原创 对象数组的排序与去重，js & es6
对象数组为objList，先根据属性TIME把最近的时间往前排（replace是为了把时间字符串里的符号去掉，才能做比较），再根据属性ID，把重复的值去掉。最后获取到数组对象的最新值：const res = new Map();const sortedData = objList.sort((a: any, b: any) => b.TIME.replace(/:|-|\s/g,...
2019-08-08 23:41:59
1262
原创 div自适应剩余高度，css
外div包含了上中下三个子div，最下面子div高度自适应。本来还在想用absolute，height:100%之类方法，但怎么试怎么不对。后来搜到box-sizing突然想起一直用的flex，其实把父div设成纵向：flex-direction: column;（height:100%;display:flex）上/中div不管高度多少，下方div设个flex-grow: 1;就自适应了剩余...
2019-08-02 16:51:10
390
原创 小问题引发的大量浪费时间
2019.7.23项目里一直用的是Blueprint作为外观组件，在<MultiSelect />的itemRenderer方法里我引用了同样为该组件的<Menu />，然后就产生了这样的问题——测试环境非常正常，一build到正式环境就报错，报的还是那种看不懂的东西：Invariant Violation: Minified React error #130……然后就...
2019-07-23 14:21:16
194
原创 Typesctript和React的二三事
折磨了我近一个星期的问题终于找到了答案，一开始我只是想一个项目的mapbox地图放到另一个项目的storybook上用，但是首先迎面而来的问题就是：我明明按另一个文件安装了相同的包，另一边却报错，明明声明文件我也复制了，可还是说：Namespace '"mapbox-gl" has no exported member 'Map''……我看了下原项目，这个Map居然是引用C:\Users\用户\A...
2019-07-19 18:13:30
266
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人