实现 React 在线代码编辑器

以下是一个基于 React 的在线代码编辑器实现方案，使用 monaco-editor（VS Code 的核心编辑器）作为核心组件，支持语法高亮、自动补全和实时预览。

安装依赖

确保已安装 React 和必要的编辑器依赖：

npm install react react-dom @monaco-editor/react

 
————————————————
版权声明：本文为CSDN博主「YEIDNEKJ1923」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/YEIDNEKJ1923/article/details/156970976

核心代码实现

import React, { useState, useEffect } from 'react';
import Editor from '@monaco-editor/react';

const CodeEditor = () => {
  const [code, setCode] = useState('// Write your code here\n');
  const [output, setOutput] = useState('');
  const [language, setLanguage] = useState('javascript');

  const handleEditorChange = (value) => {
    setCode(value);
  };

  const executeCode = () => {
    try {
      // 注意：实际项目中应使用沙箱环境执行代码
      const result = new Function(code