Reactjs 如何在 nextjs 中单击按钮时动态导入和渲染组件

发布于01月31日

我知道在这个主题中有几个nextjs和reactjs的问题，但我认为这个问题足够具体，可以有自己的主题.因此，我有一个NextJS项目，其中我希望一个按钮在单击时消失，然后动态导入一个组件并呈现它.

由于两件事，动态导入组件是至关重要的.

因为我们在组件中使用依赖于"Windows"的库
因为该组件会影响加载时间，而我们仅在单击‘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>

请记住，这并不是我能做的全部，我只是清理了失败的try ，为您提供了一个干净、可读和可理解的代码片段.

提前谢谢您！

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 } </> ); }

Reactjs 如何在 nextjs 中单击按钮时动态导入和渲染组件

推荐答案

Reactjs相关问答推荐

删除表2的收件箱未按预期工作

面对动画警告：未指定`useNativeDriver`.这是必需的选项，并且必须在REACT本机中显式设置为`true`或`False`

Reaction Ploly：如何在多个子情节中共享zoom 状态

在Reaction中单击并显示子组件延迟/动画

StyleX中的多语言支持

当列表中的项的顺序改变并且使用唯一键作为它们的索引时，Reaction如何看待呈现方面？

我如何在不被 destruct 的情况下将导航栏固定在顶部？

使用Next.js和Next-intl重写区域设置

在 useSelector() 中使用 array.map() 如何导致组件在分派操作时重新渲染？

如何管理可重用无线电输入的 React 状态？

当我使用 Firebase Auth 在 React 中刷新主页时显示登录页面

无法在react 中向表中添加行

React + Redux：数据未正确传递给具有动态路由的组件

我收到Uncaught TypeError： props.handleSelect is not a function

改变输入的默认值时出现问题：number react-hook-form

如何在不重新加载页面的情况下加载新添加的数据？

如何在 React 中单击鼠标的位置动态添加 div？

是什么导致了这个令人惊讶的数组导致 React

从输入中获取数字时，react 计数器不会增加

如何在 react-router-dom v6 中实现监听功能？