react-codemirror 怎么使用

React-codemirror 是一个 React 组件，用于在 React 应用程序中使用 CodeMirror 编辑器。要在项目中使用 react-codemirror，可以按照以下步骤进行操作：

1. 安装依赖：

npm install react-codemirror codemirror

2. 在组件中导入 react-codemirror 和 codemirror 样式：

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

3. 在组件中使用 react-codemirror：

function MyComponent() {
  const [code, setCode] = useState('const hello = "Hello World!";');
  const options = {
    mode: 'javascript',
    theme: 'material',
    lineNumbers: true,
  };

  return (
    <CodeMirror
      value={code}
      options={options}
      onBeforeChange={(editor, data, value) => {
        setCode(value);
      }}
    />
  );
}

在上面的示例中，我们创建了一个包含 CodeMirror 组件的函数组件 `MyComponent`。我们还定义了一个名为 `code` 的状态变量，并将其初始值设置为字符串 `"const hello = 'Hello World!';"`。

我们还定义了一个名为 `options` 的对象，指定了编辑器的一些选项，例如编辑器模式、主题和行号。

最后，我们将 `CodeMirror` 组件渲染到组件中，并将 `value`、`options` 和一个回调函数 `onBeforeChange` 作为组件的 props 传递。在回调函数中，我们将编辑器中的值设置为 `code` 状态变量的新值。

这是一个简单的 react-codemirror 的使用示例。您可以根据您的需要调整代码，以满足您的需求。