react-踩坑记录——swiper报错！

已经在html文件中使用过，正确无误；但做成组件后（各种依赖文件引入路径确认无误）报错。

在只引入swiper.css时未报错，引入swiper.js文件后报错，如下：

错误原因，不详。

解决措施，不引入swiper.js,而是直接npm install swiper,在文件头部导入，如⬇️：

import React, { Component } from 'react';
import logo from './logo.svg';
import '../src/css/reset.css';
import '../src/css/swiper.css';
import '../src/css/slider.css';
import Swiper from 'swiper';class Slider extends Component {constructor(){super();this.state = {};}componentDidMount(){var swiper = new Swiper('.swiper-container', {pagination: '.swiper-pagination',nextButton: '.swiper-button-next',prevButton: '.swiper-button-prev',paginationClickable: true,spaceBetween: 30,centeredSlides: true,autoplay: 2500,autoplayDisableOnInteraction: false});}render(){return <div className="swiper-container"><div className="swiper-wrapper"><div className="swiper-slide">Slide 1</div><div className="swiper-slide">Slide 2</div><div className="swiper-slide">Slide 3</div><div className="swiper-slide">Slide 4</div></div><div className="swiper-pagination"></div><div className="swiper-button-next"></div><div className="swiper-button-prev"></div></div>
      }
}class App extends Component {render(){return <div><Slider></Slider></div>
  }
}export default App;

这时又出现了新问题，写在html 文件中预览时还能自动轮播的图片，拆成组件后只能手划动轮播。。。待解

转载于:https://www.cnblogs.com/LLLLily/p/7528147.html

react-踩坑记录——swiper报错！相关推荐

利用convert【ImageMagick】把pdf批量转换为图片踩坑（gs报错和清晰度问题）
利用convert[ImageMagick]把pdf批量转换为图片踩坑前言坑1 gs报错解决方案: 坑2 导出的文件太模糊解决方案参数介绍: 总结最后附上完整的命令前言最近做一个pdf ...
踩坑：gitee报错fatal: Couldn‘t find remote ref master。
在通过vscode提交代码到远程仓库的时候,报了这个错:fatal: Couldn't find remote ref master. 然后,我在网上找了超级多方法,基本都是检查仓库配置,我贴一下,看 ...
[前端踩坑]引入组件报错Already included file name ‘XXX‘ differs from file name ‘XXX‘ only in casing.
报错代码: import Search from './components/Search.vue' 修改方式:去掉后缀".vue"即可(原因不明)
【踩坑记录】mybatis-plus的insert方法，默认会生成一个uuid作为主键，导致类型不一致，存入数据库报错
[踩坑记录]mybatis-plus的insert方法,默认会生成一个uuid作为主键,导致类型不一致,存入数据库报错报错记录解决方案推荐方案使用uuid作为主键,修改id的类型为bigint ...
mysql 结束符报错_【踩坑记录】MySQL 实现自定义递归函数
因项目需要,需根据某个商品类别path,查询该类别下的所有子类别表 goods-categories(path,parent_id,id) 该处使用的表为临时创建的表 t1(id,parent_i ...
【学习react中遇到的坑:内存泄漏报错】
学习react中遇到的坑:内存泄漏报错对就是这个错误 Can't perform a React state update on an unmounted component. This is a ...
uc浏览器请求被拦截报跨域踩坑记录
记录下开发时uc浏览器请求被拦截时遇到的问题请求在uc浏览器出现跨域问题 app使用uniapp开发,使用plus.runtime.launchApplication来打开并跳转指定页面,并在Xco ...
为Jupyter notebook配置R kernel过程及踩坑记录
为Jupyter notebook配置R kernel过程及踩坑记录注意:本文为作者安装过程及折腾的过程,内容比较冗杂,如果读者想直接创建一个属于自己的子环境则参考: 如下文章: anaconda下 ...
Python打包工具Pyintealler打包py文件为windows exe文件过程及踩坑记录+实战例子
Python打包工具Pyintealler打包py文件为windows exe文件过程及踩坑记录+实战例子目录 Python打包工具Pyintealler打包py文件为windows exe文件过程 ...
osx php7 imagick,[PHP] MacOS 自带php环境安装imagick扩展踩坑记录 | 码农部落
前言最近学习yii2,在搭建环境后,发现在访问contact页面时报错,如下: "Either GD PHP extension with FreeType support or Imag ...

react-踩坑记录——swiper报错！

react-踩坑记录——swiper报错！相关推荐

最新文章

热门文章