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

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>

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