时间戳

首页 > 解决方案 > 带有 next.js 的类的新实例不起作用

javascript - 带有 next.js 的类的新实例不起作用

问题描述

我正在尝试在 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>

根据文档。无论我在哪里尝试，它都会出错。任何指针？

谢谢你。

标签： javascriptnext.js

解决方案

我认为您需要将函数组件转换为类组件并尝试在componentDidMountlifycycle 方法中初始化 siema 插件，因为它是在初始化之后执行的render

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;

希望这可以帮助！

推荐阅读