coco723的博客

移动端配置：必须和PC端使用同一个WI-FI，链接好WI-FI之后，点击链好的WI-FI进入网路设置，配置代理，IP地址为PC端本机IP地址（如果不清楚，可以启动命令控制台，ipconfig查看）端口号为代理服务器的运行端口号。1. 在画UI的时候，更适合在PC端调试，更改代码或者直接在浏览器调试，都是实时出效果的；更符合开发体验和效率；2. 在调试一些功能和原生端交互的时候，PC端的H5页面是无法调试的；代理成功后，在移动端访问对应的页面，PC端代理服务器就可以看到请求的数据了，主要是后端接口请求；

3. 因为基于react框架开发，所以使用了第三方插件react- cropper。最近接到的需求中H5头像上传和实现基本的图片裁剪，这也是比较常见且典型的场景。2. 选择图片后，将选中的图片放入画布；1. 调起移动端相机拍照或相册功能；1. 封装react组件。2. 实现图片裁剪功能。

看需求似乎很简单，再加上本身antd-design已经封装好的Upload组件，功能强大且丰富；但是具体需求场景中还是有不少交互细节，也花了一些时间调试，为以后碰到类似场景更快速高效实现，记录和分享出来。一般二进制处理，可以支持各类文件格式，本质视频也是文件的一种格式；这样就解决了，Modal弹窗承载视频播放，Modal弹窗的宽高与视频的宽高一致；（1）配置中支持上传视频、上传成功后封面缩略图展示，点击后自动播放视频；（1）实现代码如下：被注释掉的代码：交互效果，点击直接新开页。

相关问题：按照官方文档，初始化项目，完成运行yarn start/dev报错如下输出：仔细看msfu相关文件报错，Google搜索什么是msfu?mfsu 是一种基于 webpack5 新特性 Module Federation 的打包提速方案。核心原理是将应用的依赖构建为一个 Module Federation 的 remote 应用，以免去应用热更新时对依赖的编译。因此，开启 mfsu 可以大幅减少热更新所需的时间。在生产模式，也可以通过提前编译依赖，大幅提升部署效率。尝试解决

探究问题一：依赖版本的逻辑是什么？参考了这片文章：https://juejin.cn/post/6844903981668368392，启发，进一步探究如下：去查看npm包依赖情况，输入命令：yarn list 但是依赖太多，导致前面已经看不到了，所以将所有依赖输出到文件中yarn list > echo右侧为输出的echo文件，可以看到antd-mobile使用的是2.3.4版本，依赖的rc-checkbox版本是2.0.0antd使用的是4.16.8版本，依赖的rc-che

问题在使用antd Table的rowSelection时，无法选中，报如下错误：但是在codesandbox中，点击复选框，并不会报错定位https://juejin.cn/post/6844904138057187336问题描述，和当前实际遇到的类似，项目中同时有PC端和移动端的，package.json中有antd和antd-mobile依赖，接下来就差验证了，直接去掉antd-mobile依赖，重新yarn安装，因为，PC端和移动webpack分开打包，所以本地直接yarn dev:p

项目页面发现有warning信息，如下：看第一行是一个比价常见的错误信息，那第一反应就是map list应该没有设置key值，当前文件搜索map都设置了，为什么还有warning呢？代码按模块注解再结合错误堆栈信息定位到是调用Table导致的问题 ，但是不理解的是，明明Table的每一列都设置了key，那为什么还会报错呢？问题怎么解决？const columns = [ { title: 'Name', dataIndex: 'name', key: 'name' }, { title: '

最近项目迭代中，设计到好多列表相关的展示，基于React封装了antd的Table组件，代码大致如下： <Table dataSource={dataSource} columns={columns} size={tableSize ? tableSize : "middle"} onChange={handleTableChange} scroll={scroll} pagination={{ current: