react 中实现codemirror

要在React中实现CodeMirror，可以使用React CodeMirror组件。这个组件是一个React包装器，它将CodeMirror编辑器包装在React组件中，使其易于在React应用程序中使用。

首先，你需要安装React CodeMirror组件。你可以使用npm或yarn来安装它：

npm install react-codemirror2

或者

yarn add react-codemirror2

然后，你需要在你的React组件中导入CodeMirror和React CodeMirror组件：

import React, { Component } from 'react';
import { Controlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import 'codemirror/mode/javascript/javascript';

在你的组件中，你可以使用CodeMirror组件来渲染一个CodeMirror编辑器：

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      code: '// Type your code here'
    };
  }

  handleChange = (editor, data, value) => {
    this.setState({ code: value });
  };

  render() {
    return (
      <CodeMirror
        value={this.state.code}
        onBeforeChange={(editor, data, value) => {
          this.setState({ code: value });
        }}
        onChange={this.handleChange}
        options={{
          mode: 'javascript',
          theme: 'material',
          lineNumbers: true
        }}
      />
    );
  }
}

在这个例子中，我们创建了一个MyComponent组件，它包含一个CodeMirror编辑器。我们将编辑器的值存储在组件的状态中，并使用handleChange方法来更新状态。我们还设置了一些选项，例如编辑器的模式和主题。