react-codemirror

React-codemirror是一个React组件，它提供了一个代码编辑器，可以在React应用程序中使用。它是基于CodeMirror构建的，可以轻松地将其集成到React项目中。以下是一个简单的React-codemirror演示：

首先，安装react-codemirror2和codemirror：

npm install react-codemirror2 codemirror --save

然后，在你的React组件中引入Codemirror组件：

import {UnControlled as CodeMirror} from 'react-codemirror2'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/material.css'
import 'codemirror/mode/javascript/javascript'

function App() {
  const [code, setCode] = useState('const greeting = "Hello World!')
  
  return (
    <div>
      <h1>React Codemirror Demo</h1>
      <CodeMirror
        value={code}
        options={{
          mode: 'javascript',
          theme: 'material',
          lineNumbers: true
        }}
        onChange={(editor, data, value) => {
          setCode(value)
        }}
      />
    </div>
  )
}

在上面的代码中，我们首先从react-codemirror2中引入UnControlled组件，然后在组件中设置了一些选项，例如代码模式，主题和行号。我们还设置了一个onChange事件处理程序，以便在编辑器中更改代码时更新状态。

最后，我们将Codemirror组件呈现在我们的应用程序中，并将其值设置为我们的状态代码。现在，当我们在编辑器中更改代码时，状态将更新并反映在UI中。