class 的新实例 next.js 不工作

Question

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

根据文档。无论我在哪里尝试，它都会出错。有什么指点吗？

谢谢。

Answer 1

我认为你需要将函数组件转换为class组件并尝试在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;

希望对您有所帮助！

class 的新实例 next.js 不工作

New instance of a class with next.js not working

javascript

next.js