在Next.js中动态导入模块时出现"forwardRef"错误

Question

我试图在外部组件上使用forwardRef，但ref.current不是实际的ref。不确定我是否遗漏了什么。

我在做：

const Editor = dynamic(() => import("react-markdown-editor-lite"), {
ssr: false
});
const ForwardedRefEditor = forwardRef((props, ref) => (
<Editor {...props} ref={ref} />
));
-----
const editorRef = useRef(null);
<ForwardedRefEditor
ref={editorRef}
value={content}
onChange={({ text }) => setContent(text)}
/>

完整代码：https://codesandbox.io/s/objective-benz-qh4ec?file=/pages/index.js:63-73

更多信息：https://github.com/vercel/next.js/issues/4957

Answer 1

您需要将组件封装在自定义组件中。

使用forwardRef：

包装Editor组件：

import React from "react";
import Editor from "react-markdown-editor-lite";
export default function WrappedEditor({ editorRef, ...props }) {
return <Editor {...props} ref={editorRef} />;
}

然后动态导入：

import dynamic from "next/dynamic";
import { useRef, useState, forwardRef } from "react";
const Editor = dynamic(() => import("../WrappedEditor"), {
ssr: false
});
const ForwardRefEditor = forwardRef((props, ref) => 
<Editor {...props} editorRef={ref}/>
)
export default function IndexPage() {
const editorRef = useRef(null);
const [content, setContent] = useState("");
console.log("editorRef", editorRef.current);
return (
<ForwardRefEditor
ref={editorRef}
value={content}
onChange={({ text }) => setContent(text)}
/>
);
}

代码沙盒

您也可以在不使用forwardRef的情况下使用自定义道具方法。

自定义道具

完全按照前面的例子包装Editor组件：

import React from "react";
import Editor from "react-markdown-editor-lite";
export default function WrappedEditor({ editorRef, ...props }) {
return <Editor {...props} ref={editorRef} />;
}

将自定义ref道具传递给Editor组件：

import dynamic from "next/dynamic";
import { useRef, useState } from "react";
const Editor = dynamic(() => import("../WrappedEditor"), {
ssr: false
});
export default function IndexPage() {
const editorRef = useRef(null);
const [content, setContent] = useState("");
console.log("editorRef", editorRef.current);
return (
<Editor
editorRef={editorRef}
value={content}
onChange={({ text }) => setContent(text)}
/>
);
}

代码沙盒