我想在next.js应用程序使用一个js旋转台(siema),但不能让它开始工作。我得到的错误,不管我怎么努力。
我有一个幻灯片组件调用HomeSlideShow.js:
import Head from "next/head";
import Siema from "../.next/static/js/siema";
const HomeSlideShow = props => (
<div>
<Head>
<script type="module" src="_next/static/js/siema.js" />
</Head>
<div className="siema">
<div>Hi, I'm slide 1</div>
<div>Hi, I'm slide 2</div>
<div>Hi, I'm slide 3</div>
<div>Hi, I'm slide 4</div>
</div>
</div>
);
export default HomeSlideShow;
我导入组件在index.js文件:
import HomeSlideShow from "../components/HomeSlideShow";
const Index = props => (
<Layout>
<HomeSlideShow />
</Layout>
);
我只是不知道如何初始化使用滑块:
new Siema();
要么:
<script>
new Siema();
</script>
按照该文档。无论我尝试它,它的错误。任何指针?
谢谢。
我认为你需要的功能成分转换成类组件,并尝试初始化内部componentDidMount
lifycycle method as it is executed after initial render
siema插件
import Head from 'next/head';
import Siema from '../.next/static/js/siema';
class HomeSlideShow extends React.component {
componentDidMount() {
new Siema();
}
render() {
return (
<div>
<Head>
<script type="module" src="_next/static/js/siema.js" />
</Head>
<div className="siema">
<div>Hi, I'm slide 1</div>
<div>Hi, I'm slide 2</div>
<div>Hi, I'm slide 3</div>
<div>Hi, I'm slide 4</div>
</div>
</div>
);
}
}
export default HomeSlideShow;
希望这可以帮助!