Typescript 在 next.js 13.4 中为reactemaileditor使用forwardRef和nextdynamic的正确方法

我一直在try 在Next中使用"Reaction-Email-EDITOR".我想将在编辑器中创建的邮箱内容复制到剪贴板.由于该包使用"Window"进行交互，所以我try 使用Next/Dynamic来禁用SSR.因此，我try 为EmailEditor创建不同的组件.但当我试图记录emailEditorRef时，它从未指向EmailEditor.我需要emailEditorRef来复制邮箱编辑器中的内容.

我使用的版本是:"REACT":"18.2.0"，"NEXT":"13.4.19"，"REACT-EMAIL-EDITOR":"^1.7.9".

我将主逻辑划分为3个文件:page.tsx、tyes.tsx、mail-ui.tsx.

page.tsx个

'use client';

import { Button } from '@/components/ui/button';
import { toast } from '@/components/ui/use-toast';
import React, { useEffect, useRef } from 'react';
import { EditorRef, EmailEditorProps } from '@/components/email-template/types';
import ForwardedEmailEditor from '@/components/email-template/email-ui';

export default function Page() {
    const emailEditorRef = useRef<EditorRef | null>(null);

    useEffect(() => {
        console.log('ref changed = ', emailEditorRef.current);
    }, [emailEditorRef]);

    const exportHtml = () => {
        const unlayer = emailEditorRef.current?.editor;
        unlayer?.exportHtml((data) => {
            const { design, html } = data;
            try {
                console.log('Copy function Running',html);
                navigator.clipboard.writeText(html);
            } catch (error) {
                console.error('Clipboard write failed:', error);
            }
        });
    };

    const onReady: EmailEditorProps['onReady'] = (unlayer) => {
        console.log('editor react-email-editor is ready', emailEditorRef.current);
    };

    return (
        <section >
            <div>
                <span>Create Email Template</span>
                <Button onClick={exportHtml}>Export HTML</Button>
            </div>
            <div>
                <ForwardedEmailEditor ref={emailEditorRef} onReady={onReady} />
            </div>
        </section>
    );
}`

email-ui.tsx个

'use client';

import React from 'react';
import dynamic from 'next/dynamic';
import { EmailEditorProps, EditorRef } from './types';

const DynamicEmailEditor = dynamic(() => import('react-email-editor'), { ssr: false });

const ForwardedEmailEditor = React.forwardRef<EditorRef, EmailEditorProps>((props, ref) => {
    return <DynamicEmailEditor ref={ref} {...props} />;
});

export default ForwardedEmailEditor;

types.tsx个

'use client';

export type { EditorRef, EmailEditorProps } from 'react-email-editor';