遵循以下提示,我已经在Web应用程序中安装了react-id-swiper:
https://www.npmjs.com/package/react-id-swiper
安装:
npm install --save react-id-swiper@latest swiper@latest
我创建了以下组件:
import React from 'react';
import Swiper from 'react-id-swiper/lib/ReactIdSwiper.full';
const SimpleSwiper = () => (
<Swiper>
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
<div>Slide 4</div>
<div>Slide 5</div>
</Swiper>
)
export default SimpleSwiper;
在App.js中具有导入的组件:
import React from 'react';
import {Route} from 'react-router-dom';
import LandingPage from './templates/LandingPage';
import SimpleSwiper from "./templates/Swiper";
class App extends React.Component{
render(){
return(
<div>
<Route path="/" exact component={LandingPage} />
<Route path="/slide" component={ () =>
<SimpleSwiper />}
/>
</div>
)
}
}
export default App;
在浏览器http://localhost:3000/slide
中访问它时
显示以下错误:
Uncaught TypeError: react_1.useEffect is not a function
at ReactIdSwiper (ReactIdSwiper.full.js:104)
at mountIndeterminateComponent (react-dom.development.js:13381)
at beginWork (react-dom.development.js:13821)
at performUnitOfWork (react-dom.development.js:15864)
at workLoop (react-dom.development.js:15903)
at HTMLUnknownElement.callCallback (react-dom.development.js:100)
at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
at invokeGuardedCallback (react-dom.development.js:187)
at replayUnitOfWork (react-dom.development.js:15311)
at renderRoot (react-dom.development.js:15963)
我不确定我错过了什么...
答案 0 :(得分:0)
显然,他们已经在使用useEffect钩子(太棒了!)。也许您可以直接导入它?
import React, { useEffect } from 'react';
答案 1 :(得分:0)
编辑:
我正在使用React的16.3.2版本。
挂钩是16.8.0版的一部分,您可以通过升级React和React-dom 16.8.0来使用它。
我已对其进行升级:
npm upgrade react react-dom
已更新为"react-dom": "^16.8.6"
的版本,现在一切正常。
因此,如果要使用react-swiper,请确保您的React和React-dom是最新的,以便可以使用Hooks。