在react中简单使用swiper
大早上的张同学问我轮播图怎么写？我直接掏出swiper，swiper天下第一！
上年的时候swiper已经出第五代了我当时看不明白，文档也不怎么详细，我用vue他用原生，还直接在页面里创建swiper对象传个swiper-container呢，我整个都在#app里写，对于vue这种组件化框架来说，那种方法简直就是脱裤子放屁，原始到还不如直接新建个html写，当时看着百度上的大佬用vue引入swiper和slide组件，觉得那才是vue的写法，奈何眼拙没找到文档，体验不好，但看演示上的感觉很牛，就搁着了。
这次我终于找到了代码示例，写的非常不错，贴在这里
现在正好练练手，拿react试试，很菜，遇到很多bug，记录一下。
代码直接贴这里了
// Import Swiper React components
import {Swiper, SwiperSlide} from 'swiper/react';
// Import Swiper styles
import 'swiper/swiper.scss';
import './css/app.css'
// import Swiper core and required modules
import SwiperCore, {
Mousewheel
} from 'swiper/core';
import React from "react";
// install Swiper modules
SwiperCore.use([Mousewheel]);
const App = () => {
return (
<Swiper
mousewheel={true}
direction={'vertical'}
className={'container'}
spaceBetween={50}
slidesPerView={1}
>
{
[1,2,3,4].map(index=>{
return (
<SwiperSlide style={
{
backgroundSize: 'cover',
backgroundImage:`url(${require(`./static/${index}.jpg`).default})`
}
}>
</SwiperSlide>
)
})
}
</Swiper>
);
};
export default App
-
刚复制演示代码到编辑器里的时候，整个页面都是瘪的，忘了加css
-
react中的变量问题，我当时写个数组怎么写都不带代码提示，以为webstorm没配置好，原来是得用花括号括起来。。
-
内联样式属性接收一个对象，所以应该是style = { {css样式} }
-
图片路径问题，路径必须模块化导入，如果用import导入正常没问题，用require导入的话，require是commenJS的语法，内部默认用的ESmodule的方式，导入不了，网上说可以去webpack.config.js里把ESmodule给false了，但是我react项目把那些配置文件都隐藏了，再显示出来有点费劲，继续翻，找到了个方法，在后面写个.default就好了
-
require中的参数的字符串不能写变量，可以用模板字符串的方法写变量
路径问题我猜把图片写在public里直接在react里写字面量应该也可以，毕竟public不会被webpack解析。（纯猜想，没试过）
路径问题解决方案：
React 日常遇到的坑 - MJ_MY - 博客园 (cnblogs.com)
还有，我当时照首页的写法：
export default () => {
return (
...
);
};
这里导出的匿名函数是不对的，正常应该给他写个名字再导出。
当时报错的解决方案：
Assign array to a variable before exporting as module default_胖星星的博客-CSDN博客
大概搜了一下原因：
【Javascript核心原理】04. export default function() {}：你无法导出一个匿名函数 - 哔哩哔哩专栏 (bilibili.com)
我的理解：匿名函数会自动把左边的东西当成是它的名字，然后把default当成匿名函数的名字了，也就没有导出，当声明语句执行了，在index.js引入自然是没找到的，不知道csdn的那位大佬是怎么理解的，我没看明白
总结
暴露出了很多问题，基本功不扎实，好久没写react了，手生了
代码地址：