Question

So I am trying to insert a code editor into my web application. I am trying to import and add an instance of Codemirror. Everytime I add JSX code for a CodeMirror component it duplicates. Here is my component code.

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;

As you can see in the image there are two editors being renders. one where the default value I set has been entered and another that has a blank empty line. I am not sure why this is happening.

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>
    <App />
  </React.StrictMode>

Answer 2

I used uiwjsactive-codemirror ,发现所有特征

友情链接