问题描述
我正在使用一个富文本编辑器,该文本编辑器用于将纯HTML转换为下一个ssr js的编辑器内容。我得到了未定义此错误窗口的信息,因此我搜索了此github link
的解决方案不是直接导入编辑器import { Editor } from "react-draft-wysiwyg";
它使用此代码动态导入编辑器
const Editor = dynamic(
() => {
return import("react-draft-wysiwyg").then(mod => mod.Editor);
},{ ssr: false }
);
但是尽管我已经安装了react-draft-wysiwyg模块,但仍然出现此错误
ModuleParseError: Module parse Failed: Unexpected token (19:9)
You may need an appropriate loader to handle this file type.
| import dynamic from "next/dynamic";
| var Editor = dynamic(function () {
> return import("react-draft-wysiwyg").then(function (mod) {
| return mod.Editor;
| });
这是我的整个代码
import React,{ Component } from "react";
import { EditorState } from "draft-js";
// import { Editor } from "react-draft-wysiwyg";
import dynamic from "next/dynamic";
const Editor = dynamic(
() => {
return import("react-draft-wysiwyg").then(mod => mod.Editor);
},{ ssr: false }
);
class MyEditor extends Component {
constructor(props) {
super(props);
this.state = { editorState: EditorState.createEmpty() };
}
onEditorStateChange = editorState => {
this.setState({ editorState });
};
render() {
const { editorState } = this.state;
return (
<div>
<Editor
editorState={editorState}
wrapperClassName="rich-editor demo-wrapper"
editorClassName="demo-editor"
onEditorStateChange={this.onEditorStateChange}
placeholder="The message goes here..."
/>
</div>
);
}
}
export default MyEditor;
请帮助我。谢谢。
解决方法
尝试在 React 使用 Editor
钩子更新 DOM 后返回 useEffect
。例如:
const [editor,setEditor] = useState<boolean>(false)
useEffect(() => {
setEditor(true)
})
return (
<>
{editor ? (
<Editor
editorState={editorState}
wrapperClassName="rich-editor demo-wrapper"
editorClassName="demo-editor"
onEditorStateChange={this.onEditorStateChange}
placeholder="The message goes here..."
/>
) : null}
</>
)