1.系统环境
Windows 64位
| / | node | npm | datav |
|---|---|---|---|
| 版本 | v10.7.0 | v6.1.0 | v2.3.0 |
| npm包 | react | react-dom | swiper |
|---|---|---|---|
| 版本 | v17.0.2 | v17.0.2 | v6.8.4 |
2.在 Datav 中使用 React
datav 开发工具中内置了 babel、less 等插件支持 react 开发（和 datav 技服人员确认官方未提供插件版本相关文档）。
1.1 首先在 index.js 页面中创建一个根节点用来挂载组件，为保证根节点的唯一性需要从外部配置文件中获取唯一id。
1.2 通过 ReactDOM.render 将组件挂载到根节点。只需这两步后面就和正常的 react 开发一样了。
3.使用 Swiper（v6.8.4）
1.单行轮播图与轮播图原生行为一致，无需额外改造。
2.多行轮播图要求整屏切换，本质就是把一屏展示的内容都放在一个滑块内。根据展示的行数和每行展示的个数对源数据进行分组，分屏展示并补全缺少内容。
4.组件配置参数
basicConfig 配置如下图
contentConfig 配置如下图
5.遇到的问题及解决方案
5.1 swiper 版本不兼容
- swiper 推出的 6.x 和 7.x 版本都提供了 React 版本。最开始使用最新的 7.x 版本，但发现 datav 不支持 esm 规范，而 7.x 版本目前只有 esm 版本。所以在不能改造 datav 的情况下只能先降级使用 6.x 版本。（相关问题可看 github issues）
- 在降级使用 6.x 版本后发布组件，在线上环境发现有个文件仍然是 404，在 swiper/cjs/react/ 目录下有三个文件（get-params.js/init-swiper.js/loop.js）引用到 core 文件，但在 datav 打包后被弄丢了。
var _core = _interopRequireDefault(require("../../core"));
- 于是我想着修改 swiper/cjs/react/ 下的三个文件，调整引用路径。但有个问题就是每个人重新装 npm 包的时候会覆盖修改内容，总不能每次都手动覆盖一次吧。此时 patch-package（使用文档） 出现了，通过给 npm 打补丁的方式，每次安装都给 npm 包自动打上修改内容，简直完美。但是 datav 不支持 patch-package。f**k datav
- 最后还是把 swiper/cjs/react/ 下的六个文件拷到项目下，修改对应的文件。
var _core =
_interopRequireDefault(require("swiper/cjs/components/core/core-class"));
5.2 使用的 react 版本必须大于 16.8.0
swiper 的 react 版本内使用了 react hook，hook 是 react 在 16.8.0 以后才有的特性。
5.3 less 特性兼容问题
打包发布一切正常，但在大屏中无法使用组件。之前遇到过类似的情况（类似问题解决方案）是通过刷新缓存解决，在尝试后无果最终通过技服排查是 less 文件中使用 @import 导致构建失败。所以总结如下：
- 不支持 @import 语法
- 不支持 each 等语法，最好使用 less@v2.7.3（技服说的 less 版本） 以前的特性。
5.4 配置了 autoplay 还是无法自动轮播
官方文档 解释了 react 版本只包含了核心模块，其它的模块需要手动引入。
By default Swiper React uses core version of Swiper (without any additional modules). If you want to use Navigation, Pagination and other modules, you have to install them first. Here is the list of additional modules imports:
通过 Swiper.use 方法引入需要的模块，这里注意在使用 Effect** 等切换动画模块的时候还需要引入相应的样式文件。
5.5 手动切换轮播图后不再自动轮播
需要在 autoplay 配置中添加 disableOnInteraction: false
autoplay: {
//...
disableOnInteraction: false,
}
5.6 fade 渐变切换动画出现页面重叠
可以通过配置 crossFade: true 解决。
fadeEffect: {
crossFade: true
}
5.7 多个组件出现在同一个页面中只能展示一个
在将组件挂载到根节点前会先创建一个根节点，假如 id 相同那么最终只有最后一个创建的组件生效。
5.8 文本超出显示成...省略
通过 css 方式实现自定义 n 行展示，但要注意的是 -webkit-line-clamp 属性存在兼容性问题。
