react codemirror

在 React 中使用 CodeMirror，你可以使用第三方库 `react-codemirror2`，它提供了一个封装了 CodeMirror 编辑器的 React 组件。

首先，你需要安装 `react-codemirror2` 和 `codemirror`：

npm install react-codemirror2 codemirror

然后，你可以在你的 React 组件中导入 `Controlled` 组件和相应的样式文件：

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

在组件中，你可以使用 `Controlled` 组件来创建一个受控的 CodeMirror 编辑器。 `Controlled` 组件接受 `value`、`onBeforeChange` 和 `options` 三个属性。

- `value` 属性用于设置编辑器的初始值或当前值，它应该是一个字符串。
- `onBeforeChange` 属性是一个回调函数，在编辑器内容发生变化时被调用。你可以在这个回调函数中更新你的数据状态。
- `options` 属性用于配置编辑器的选项，例如语言模式、主题、是否显示行号等。

下面是一个简单的示例：

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

const MyEditor = () => {
  const [code, setCode] = useState("console.log('Hello, world!');");

  const handleChange = (editor, data, value) => {
    setCode(value);
  };

  return (
    <Controlled
      value={code}
      options={{
        mode: 'javascript',
        theme: 'material',
        lineNumbers: true,
      }}
      onBeforeChange={handleChange}
    />
  );
};

export default MyEditor;

在上面的示例中，我们创建了一个受控的 CodeMirror 编辑器。初始值被设置为 `console.log('Hello, world!');`，并且我们在 `handleChange` 回调函数中更新代码的状态。

这只是一个简单的示例，你可以根据需要进行更复杂的配置和操作。你可以查阅 `react-codemirror2` 和 CodeMirror 的文档以获取更详细的信息和示例。