我们如何在 Nextjs 动态导入中输入forwardRef？

Question

这是我的代码。我需要输入forwardRef，但我没有得到它，事实上我不知道到底在哪里输入它。有人能帮我吗？我收到错误

1. 类型“{}”上不存在属性“forwardedRef”。

2. 类型 '{forwardedRef: MutableRefObject; }' 不可分配给类型“IntrinsicAttributes”。类型“IntrinsicAttributes”上不存在属性“forwardedRef”。

    import type { NextPage } from "next";
    import dynamic from "next/dynamic";
    import { useRef } from "react";
    
    import "react-quill/dist/quill.snow.css";
    
    const ReactQuill = dynamic(
      async () => {
        const { default: RQ } = await import("react-quill");
    
        return ({ forwardedRef, ...props }) => <RQ ref={forwardedRef} {...props} />;
      },
      {
        ssr: false,
      }
    );
    
    const Home: NextPage = () => {
      const quillRef = useRef(null);
    
      return <ReactQuill forwardedRef={quillRef} />;
    };
    
    export default Home;

Answer 1

import type { NextPage } from "next";
import dynamic from "next/dynamic";
import { LegacyRef, useRef } from "react";
import ReactQuill from "react-quill";

import "react-quill/dist/quill.snow.css";

interface IWrappedComponent {
  forwardedRef: LegacyRef<ReactQuill>;
}

const QuillNoSSRWrapper = dynamic(
  async () => {
    const { default: RQ } = await import("react-quill");

    const QuillJS = ({ forwardedRef, ...props }: IWrappedComponent) => (
      <RQ ref={forwardedRef} {...props} />
    );
    return QuillJS;
  },
  { ssr: false }
);

const Home: NextPage = () => {
  const node = useRef<ReactQuill>(null);

  return <QuillNoSSRWrapper forwardedRef={node} />;
};

export default Home;