如何在react中使用swiper？求实例

alili

如题，怎么在react中使用swiper？？？

戴戴戴

楼主知道答案了吗

Evelyn

可以didmount 用ref 拿到实例之后new swiper

phin

1. import React from 'react'
   
2. import Swiper from 'swiper'
   
3. 
   
4. export default class Banner extends React.Component {
   
5.   constructor() {
   
6.     super()
   
7.   }
   
8. 
   
9.   componentDidMount() {
   
10.     var mySwiper = new Swiper('.swiper-container', {
    
11.       direction:'horizontal',
    
12.       navigation: {
    
13.         nextEl: '.swiper-button-next',
    
14.         prevEl: '.swiper-button-prev'
    
15.       }
    
16.     })
    
17.   }
    
18. 
    
19.   render() {
    
20.     return (
    
21.       <div className='banner'>
    
22.         <div className='swiper-container'>
    
23.           <div className='swiper-wrapper'>
    
24.             <div className='swiper-slide'>Slide 1</div>
    
25.             <div className='swiper-slide'>Slide 2</div>
    
26.             <div className='swiper-slide'>Slide 3</div>
    
27.           </div>
    
28.           <div className='swiper-button-prev' />
    
29.           <div className='swiper-button-next' />
    
30.         </div>
    
31.       </div>
    
32.     )
    
33.   }
    
34. }
    

复制代码

phin

phin 发表于 2018-4-12 09:55

1. Uncaught TypeError: Cannot read property 'params' of undefined

复制代码

phin

1. Entrypoint main [big] = bunld.js
   
2.    [7] ./node_modules/_swiper@4.2.2@swiper/dist/js/swiper.esm.bundle.js + 2 modules 243 KiB {0} [built]
   
3.        |    3 modules
   
4.    [8] ./node_modules/_css-loader@0.28.11@css-loader??ref--5-1!./node_modules/_postcss-loader@2.1.3@postcss-loader/lib!./node_modules/_less-loader@4.1.0@less-loader/dist/cjs.js!./src/common/less/common.less 4.22 KiB {0} [built]

复制代码

phin

我有同样的问题

yijiang311

phin 发表于 2018-4-12 09:57
我有同样的问题

你好，你解决这个问题了吗，是不是本身bug，我也一样出现./node_modules/swiper/dist/js/swiper.esm.bundle.js:56
说什么56行无法编译