与next.js一个新的类实例不工作

问题描述 投票:0回答:1

我想在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>

按照该文档。无论我尝试它,它的错误。任何指针?

谢谢。

javascript next.js
1个回答
1
投票

我认为你需要的功能成分转换成类组件,并尝试初始化内部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;

希望这可以帮助!

© www.soinside.com 2019 - 2024. All rights reserved.