随笔分类 - react
摘要：现在有个需求 ，我想要使用 react 选择上传文件，获取文件路径 在浏览器里面调用 ant design 的 upload 组件是做不到的，只能获取文件名 由于浏览器的安全限制，无法获取文件的完整路径。如果需要获取文件的完整路径，可以考虑使用 Electron 等桌面应用程序开发框架，或者使用 A
阅读全文
摘要：首先创建 cra 项目 如果报错 说 最新的 create-react-app 版本是 5.x ,而你的是 4.x 的话 需要 先卸载 ，再重新安装 sudo npm uninstall -g create-react-app sudo npm install -g create-react-app
阅读全文
摘要：interface ColumnDetails { [key: string]: string } const data = useMemo<ColumnDetails[]>( () => [ { col1: 'Hello', col2: 'World', }, { col1: 'react-tab
阅读全文
摘要：关掉 严格模式 参考 https://juejin.cn/post/7165538295567351839
阅读全文
摘要：html <div style={{ width: '478px', height: '361px', background: '#252a38', display: '-webkit-flex', display: 'flex', WebkitAlignItems: 'center', align
阅读全文
摘要：代码如下 <div onClick={e=>{ e.stopPropagation(); }} /> 这样是能阻止冒泡的 ，e.stopPropagation(); 能正常 执行 但是下面 这样写 是不行的 <div onClick={async (e)=>{ let res = await xxx
阅读全文
摘要：forEach 数组里面 forEach 如果带 await 的话，里面 是并行的 [1,2,3].forEach(async (x) => { await xxx(x) }) 这里面 1 2 3 是 会同时被 xxx 函数处理的 想要并行的话，得写成这样 for (const x of [1, 2
阅读全文
摘要：参考来源 https://stackoverflow.com/questions/31193418/html5-canvas-todataurl-returns-blank https://www.geeksforgeeks.org/how-to-crop-images-in-reactjs/ ht
阅读全文
摘要：如题 要是等数组 处理好 , 再setState 中间 就会卡一段时间 const [list, setList] = useState([]); let arr= [] for (const item of sourceList) { let dd = await solve(item) // 耗
阅读全文
摘要：设置一个 subject , 然后在组件内定义一个 subscription 想要发送 事件就用 subject.next 订阅就赋值 subject.asObservable().subscribe() 直接看代码 const subject = new Subject<RcFile>(); co
阅读全文
摘要：如下图 大概理解 的就是 immer 操作 的时候 ，把这个对象 给冻上了 ，别人是不能修改的， 但是 immer 在操作的时候 react 可能 也对 对象 进行 操作了， 这个时候 就报错 ，说不能操作 只读对象 解决方法 是 import {setAutoFreeze} from 'immer
阅读全文
摘要：如图 ， 出现这种 Uncaught Error: Objects are not valid as a React child 通过 注释 组件来进行 排查 ，最后 定位 到 这段 原来是为了偷懒 ，想在网页上面 打印 实体 后来发现只要 里面的实体 的 子属性 为数组 类型 ，他就 必 报错 所
阅读全文
摘要：TS2786: 'DraggableCore' cannot be used as a JSX component. Its instance type 'DraggableCore' is not a valid JSX element. The types returned by 'render
阅读全文
摘要：准备条件 1.chrome 浏览器 2. webstorm 流程 首先 点击 package.json 里面 的 start 三角形按钮 这个 会 新打开一个chrome 窗口 然后 点击 Edit Configurations ,新建一个 javascript debug 端口 写 react 运
阅读全文
摘要：有很多组件、根据类型不同，希望能够动态加载对应的组件。 现在的做法是，通过if else 或者switch 去渲染，但是这些组件都是一次性的全部加载进来了。 这样要写很多重复代码 ，想的思路是 通过 路径 传进去 ，找到 路径 对应的组件 作为 变量 放到 dom 里面 实现方式 const Dev
阅读全文
摘要：之前写vue 的时候 可以 在 index.html 里面定义 <script type="text/javascript"> const dudu = "val" </script> 然后直接 在 对应的 .vue 文件引用 变量dudu , 发布了以后 直接 改 index.html 就行 但是
阅读全文
摘要：加上 notMerge={true} 即可 另外 如果 echart 所在的父容器 尺寸发生变化 ，那么echarts 尺寸是不会更新 的， 导致 不能填满 父容器 ，这个时候 只需要 把他 重新 绘制就行了 我这里使用的是 笨办法 我把 echart 短暂的隐藏 ，然后 在 把他显示出来 ， 他就
阅读全文
摘要：js 展平数组 拼装成树有很多中 ，百度 找了 其中 一种 const createDataTree = dataset => { const hashTable = Object.create(null); dataset.forEach(aData => hashTable[aData.ID]
阅读全文
摘要：如图 删除 了 node_modules yarn.lock 重新 yarn 安装 然后 yarn start 还是这个错误 又重新 删除 node_modules yarn.lock 改用 npm install && npm run start 也还是这个错误 于是看了下 ~/proj/blog
阅读全文
