CodeMirror编辑器复制

Question

因此，我试图将代码编辑器插入到我的web应用程序中。我正在尝试导入和添加Codemirror实例。每次为CodeMirror组件添加JSX代码时，它都会重复。这是我的组件代码。

​

import { Controlled as ControlledEditor } from "react-codemirror2";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/material.css";
require("codemirror/mode/xml/xml");
require("codemirror/mode/javascript/javascript");

const ProblemSolving = () => {
  return (
    <div className="editor-container">
        <div className="editor-title">
            Hello World
        </div>
        <ControlledEditor
            value="var myVariable = 5"
            options={{
                lineWrapping: true,
                lint: true,
                mode: "javascript",
                lineNumbers: true
            }}  
        />
    </div>
  );
};

export default ProblemSolving;

​

​

​

正如您在图像中所看到的，有两个编辑器正在呈现。一个输入了我设置的默认值，另一个输入了空行。我不知道为什么会这样。

Answer 1

这个问题是由React18中的一个新特性引起的：https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state只是简单地删除了编辑器域，应该有一种更合适的方法。

function App() {
  const editor = useRef()
  const wrapper = useRef()
  const editorWillUnmount = () => {
    editor.current.display.wrapper.remove()
    wrapper.current.hydrated = false
  }
  return (
    <div className="App">
      <CodeMirror
        value='<h1>I ♥ react-codemirror2</h1>'
        ref={wrapper}
        options={{
          mode: 'xml',
          theme: 'material',
          lineNumbers: true
        }}
        onChange={(editor, data, value) => {
        }}
        editorDidMount={(e) => editor.current = e}
        editorWillUnmount={editorWillUnmount}
      />
    </div>
  );
}

或删除React.StrictMode中的index.js

  <React.StrictMode>
    <App />
  </React.StrictMode>