如何在nextjs中动态导入和呈现一个按钮点击的组件？

apeeds0o 于 2023-02-04 发布在其他

关注(0)|答案(1)|浏览(166)

我知道在这个主题中有几个nextjs和reactjs问题，但是我认为这已经足够具体了，可以有一个自己的线程。所以我有一个NextJS项目，我希望在点击时按钮消失，然后动态导入组件并呈现它。
动态导入组件至关重要，原因有两点。
1.因为我们使用依赖于"window"的组件中的库
1.因为该组件影响加载时间，并且我们仅在单击"init按钮"时才需要它
下面是我的index.js代码：

import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import dynamic from "next/dynamic"
import React, { useEffect, useState } from "react";

import { Inter } from "@next/font/google";

const inter = Inter({ subsets: ["latin"] });

export default function Home() {

    return (
      <>
        <Head>
          <title>My page</title>
          <meta
            name='description'
            content="Some desc. content"
          />
          <meta name='viewport' content='width=device-width, initial-scale=1' />
          <link rel='icon' href='/favicon.ico' />
        </Head>
        <button onClick={initSurvey()}>Initialize!</button>
        
      </>
    )
    }

  function initSurvey(){
    console.log("The button is working!")
    const Survey = dynamic(() => import("../components/SurveyComponent"), {
      ssr: false,
    })
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

请记住，这不是我所能做的全部，我只是清理了失败的尝试，为您提供一个干净，可读和可理解的片段。
先谢谢你!

next.js

来源：https://stackoverflow.com/questions/75287330/how-to-both-dynamically-import-and-render-a-component-on-button-click-in-nextjs

1条答案

按热度按时间

xuo3flqw1#

通过查看React.lazy文档和本指南，我设法找到了这个解决方案：

import { lazy, Suspense, useState } from "react";

const dynamicComponent = lazy(() => import('../components/MyDynamicComponent');

export default function Home() {

   const [dynComp, setDynComp] = useState(<div/>);

   const loadDynamicComponent = () => {

      return (
         <Suspense fallback={<div>Loading...</div>}>
            <dynamicComponent/>
         </Suspense>
      )
   }

   return (
      <>
         <button onClick={ () => setDynComp(<div>{loadDynamicComponent()}</div>)}>Initialize!</button>
         { dynState }
      </>
   );

}

测试一下，如果对你有帮助就告诉我！

赞(0）回复(0）举报 2023-02-04

我来回答

如何在nextjs中动态导入和呈现一个按钮点击的组件？

1条答案

相关问题

热门标签

最新问答