Created
September 20, 2022 13:30
-
-
Save discountry/01d368046df6a441cf596f054b95fa85 to your computer and use it in GitHub Desktop.
nextjs dynamic import custom ref
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { FC, useImperativeHandle } from "react"; | |
| type ChartProps = { | |
| chartRef?: any; | |
| }; | |
| const Chart: FC<ChartProps> = ({ chartRef }) => { | |
| useImperativeHandle(chartRef, () => ({ | |
| test() { | |
| alert("test"); | |
| }, | |
| })); | |
| return <div>Chart</div>; | |
| }; | |
| export default Chart; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import type { NextPage } from "next"; | |
| import Head from "next/head"; | |
| import { useRef } from "react"; | |
| import dynamic from "next/dynamic"; | |
| const Chart = dynamic(() => import("./Chart"), { ssr: false }); | |
| const Trade: NextPage = () => { | |
| const chartRef = useRef() as any; | |
| function handleTest() { | |
| chartRef.current.test(); | |
| } | |
| return ( | |
| <div> | |
| <Head> | |
| <title>Trade</title> | |
| <meta name="description" content="Generated by create next app" /> | |
| <link rel="icon" href="/favicon.ico" /> | |
| </Head> | |
| <main> | |
| <h1>Trade</h1> | |
| <Chart chartRef={chartRef} /> | |
| <button onClick={handleTest}>Test</button> | |
| </main> | |
| </div> | |
| ); | |
| }; | |
| export default Trade; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment