当我在 nextjs 项目中使用 jodti-react 文本编辑器时，自我未定义错误

Question

当我在 nextjs 项目中使用 jodti-react 时，自我未定义错误

import React, { useState, useRef, useMemo } from "react";
import Dashborad from "./Dashborad";
import JoditEditor from "jodit-react";
import dynamic from "next/dynamic";

export default function edit() {
  const editor = useRef();
  const [content, setContent] = useState("");

  return (
    <Dashborad>
      <JoditEditor
        ref={editor}
        value={content}
        tabIndex={1} // tabIndex of textarea
        onBlur={(newContent) => setContent(newContent)} // preferred to use only this option to update the content for performance reasons
        onChange={(newContent) => setContent(newContent)}
      />
    </Dashborad>
  );
}

}

如何解决这个错误？

Answer 1

创建 jodit.js 文件

import { useRef, useMemo } from 'react'
import JoditEditor from 'jodit-react'

const Jodit = ({ content, setContent }) => {
  const editor = useRef(null)

  return (
    <JoditEditor
       ref={editor}
        value={content}
        tabIndex={1} // tabIndex of textarea
        onBlur={(newContent) => setContent(newContent)} // preferred to use only this option to update the content for performance reasons
        onChange={(newContent) => setContent(newContent)}
    />
  )
}
export default Jodit

使用动态导入

  const Jodit = dynamic(() => import('./Jodit'), { ssr: false })