我有以下问题:
未处理的运行时错误:元素类型无效:需要字符串(对于内置组件)或类/函数(对于复合组件),但得到:您可能忘记了从定义组件的文件中导出组件,或者您可能混淆了默认导入和命名导入。检查Resumos
的渲染方法。
这些不同的解决方案不起作用:
解决方案1:
import dynamic from "next/dynamic";
const { CKEditor } = dynamic(
() => {
return import('@ckeditor/ckeditor5-react');
},
{ ssr: false }
);
const {ClassicEditor} = dynamic(
() => {
return import('@ckeditor/ckeditor5-build-classic');
},
{ ssr: false }
);
const Resumos = ({id}) => {
<CKEditor
editor={ ClassicEditor }
data={textoResumoAluno}
onChange={handleChangeTextoResumoAluno}
/>
}
溶液2:
const Resumos = ({id}) => {
const editorRef = useRef()
const [ editorLoaded, setEditorLoaded ] = useState( false )
const { CKEditor, ClassicEditor } = editorRef.current || {}
useEffect( () => {
editorRef.current = {
CKEditor: require( '@ckeditor/ckeditor5-react' ),
ClassicEditor: require( '@ckeditor/ckeditor5-build-classic' )
}
setEditorLoaded( true )
}, [] );
{editorLoaded ? (
<CKEditor
editor={ ClassicEditor }
data={textoResumoAluno}
onInit={ editor => { /*You can store the "editor" and use when it is needed.
console.log('Editor is ready to use!', editor)*/
}}
onChange={handleChangeTextoResumoAluno}
/>
) : (
<div>Editor loading</div>
)}
}
2条答案
按热度按时间fruv7luv1#
谢谢@EstusFlask,它帮助我找到了解决方案!
jjhzyzn02#
实际上,你可以这样做:https://stackoverflow.com/a/72813101/4345461
(添加了我的版本,下面有一些改进,以减少点击-如果这对您有帮助,请也支持原始答案)
@/components/CKEditor/ClassicCKEditor:
EmailTemplateView.tsx