欢迎来到我的博客 👋

前言 这两天开发同事碰到一个问题，他开发环境下 antd 的 DatePicker 组件会报一个错 antd datepicker cannot be used as a jsx component 搜了一下网上也有不少问题 issue链接 因为我们项目中用得还是 4.20.x 版本的 antd ，所以没有办法测试新版是否修复了问题，目前按照我们自己的方式找到了解决方法 解决方法 其实和上面 issue 里的解决方法一样，在 package.json 中加入 resolutions "resolutions": { "@types/react": "17.0.44", "@types/react-dom": "17.0.17" } 在我们项目中，这个版本的 types 能很好的解决这个问题，但是还会出现一个问题。 因为用到了 resolutions ，所以 node 14 左右的 npm install 会没法成功，导致报错依旧。 而 node 16 的版本会因为版本不兼容导致 npm install 失败，需要 –force 才能继续安装 所以这边建议使用 yarn 来进行项目的运行和安装。 如果你们项目中还是使用 npm ，可以参考在 scripts 中加入如下 "scripts": { "preinstall": "npx npm-force-resolutions", } 或者 npm install –force ，实测也是没有报错，但不知是否有其他副作用...

准备 WSL2 Clash for Windows 代理 首先我们需要开启 Clash 的设置 Allow Lan 来允许局域网的连接。 开启之后，我们打开 WSL ，在命令行中输入 cat /etc/resolv.conf 我们应该会得到这么一段内容 # This file was automatically generated by WSL. To stop automatic generation of this file, add the following entry to /etc/wsl.conf: # [network] # generateResolvConf = false nameserver 173.22.221.1 那么 nameserver 就是 DNS 服务器，我们需要记下这个，然后在配置代理 export ALL_PROXY="http://173.22.221.1:7890" 7890 端口是 Clash 代理的端口， Clash 上是多少，这里就修改成多少，默认 7890 之后运行 curl www.google.com 能正常返回内容就说明代理成功啦 脚本 按照上面的操作，每次都这么来一下还挺麻烦的，所以写一个脚本方便我们使用 首先我们创建一个文件·.proxyrc 或者其他名也行...

前言 群里卷仔的代码，用了 html2canvas ，但是保存成 canvas 时出现了文字下移的问题。 讨论 & 解决 老板 Sakura 给出了源码级解决方案，给源码这里加上 img.style.display = 'inline' 就能解决。 后来发现禁用样式 @tailwind base 也能解决问题，所以从样式入手解决。 最后发现是 img { display: block; } 导致的问题。原因应该与 Sakura 给出的源码问题差不多，因此解决方案就是加上样式重置回默认 img { display: unset; } 总结 Sakura 真是太强啦！...

前言 今天接了个需求，用文件名去请求，然后后端返回数据回来，前端下载。以前都是 location 直接跳转下载。 下载 下载通过原生的 fetch 接口来进行，相关文档。因为原来请求是用 umi-request ，拦截器做了配置都不针对下载相关，所以会出问题，懒得改直接就封装一个 fetch 更方便 正常请求如下 export function downloadFileLink(link: string, fileName: string) { const a = document.createElement("a"); document.body.appendChild(a); a.href = link; a.target = "_blank"; a.download = fileName; a.click(); a.remove(); window.URL.revokeObjectURL(link); } async function downloadFile(url: string) { try { const result = await fetch(url, { method: "GET", headers: {}, // 自己的一些 token 相关 }); const blob = result.blob(); const link = window.URL.createObjectURL(blob); downloadFileLink(blob, "下载名"); } catch { // 相关的 catch 可以自行封装，fetch 只有在出现网络错误时会 catch } } ...

前言 虽然通过 create-react-app 能自带好多 jest 的配置，但是最近开发基本都是用 vite ，在配置的时候遇到了点问题，特别是搭配 typescript 使用的时候，所以记录一下。 默认按照这个模板来讲解，如果其他的话大致修改应该也差不多。 安装依赖 首先需要安装我们所需要的依赖 npm install jest @types/jest -D npm install @babel/preset-env @babel/preset-react @babel/preset-typescript -D npm install @testing-library/jest-dom @testing-library/react identity-obj-proxy -D 我在使用 pnpm 安装依赖的时候会碰上一些报错，比如 missing @babel/core 之类的，可以放着不管它。 配置文件 package.json 需要在文件最下方加上如下配置 { // ... "scripts": { // ... "test": "jest" }, // ... "jest": { "testEnvironment": "jsdom", "setupFilesAfterEnv": [ "<rootDir>/jest-setup.ts" ], "moduleNameMapper": { "\\.(css|less)$": "identity-obj-proxy" } } } jest-setup.ts 在根目录下新建 jest-setup.ts import "@testing-library/jest-dom"; babel....