React+TypeScript项目中如何使用CodeMirror？

在React+TypeScript项目中使用CodeMirror，首先需要安装CodeMirror库以及TypeScript的类型定义文件：

npm install codemirror
npm install @types/codemirror

然后，你可以创建一个React组件来封装CodeMirror的使用。以下是一个简单的例子：

import React, { useEffect, useRef } from 'react';
import CodeMirror from 'codemirror';
import 'codemirror/lib/codemirror.css';
 
interface CodeMirrorProps {
  value: string;
  onChange: (value: string) => void;
}
 
const CodeMirrorComponent: React.FC<CodeMirrorProps> = ({ value, onChange }) => {
  const editorRef = useRef<HTMLDivElement>(null);
 
  useEffect(() => {
    const editor = CodeMirror(editorRef.current!, {
      value,
      mode: 'javascript', // 可以根据需要设置不同的模式，例如 'python', 'css' 等
      theme: 'material', // 编辑器主题
      lineNumbers: true, // 显示行号
      extraKeys: { 'Ctrl-Space': 'autocomplete' }, // 代码补全快捷键
    });
 
    editor.on('change', (instance, change) => {
      if (change.origin !== 'setValue') {
        onChange(instance.getValue());
      }
    });
 
    return () => {
      editor.toTextArea(); // 清理编辑器实例
    };
  }, []);
 
  return <div ref={editorRef} style={{ height: '100%' }} />;
};
 
export default CodeMirrorComponent;

在上面的代码中，我们创建了一个CodeMirrorComponent组件，它接收value和onChange属性，分别用于设置编辑器的初始内容和处理内容变化的回调。我们使用useRef来获取DOM元素的引用，并在useEffect中初始化CodeMirror编辑器实例。每当编辑器内容变化时，我们都会调用onChange回调函数，并传递新的值。

要注意的是，这个例子中的useEffect钩子只会在组件挂载时执行一次，因此它适合于只初始化CodeMirror一次的情况。如果你需要动态地重新配置编辑器，你可能需要在钩子中添加依赖项数组，并在数组中指定依赖项，从而在依赖项变化时更新编辑器配置。