React实现的HTML/CSS/JS编辑器中动态JS无法执行求助

问题原因 #

1. 静态script标签无法重新执行：直接修改已存在的<script>标签innerHTML不会触发浏览器重新解析执行脚本，浏览器仅在script标签首次加载时执行内容。
2. 执行时机不匹配：当前JS代码执行时，HTML元素可能还未更新到DOM中，导致无法获取目标元素（如示例中的button）。
3. 内容获取方式缺陷：使用contentEditable元素的textContent获取代码会丢失换行、缩进等格式，可能导致JS语法错误。

解决方案 #

以下是修改后的完整App组件代码，核心改动针对JS执行逻辑和内容获取方式：

import './App.css';
import { useEffect, useRef, useState } from 'react';

function App() {
  const [html, setHtml] = useState("");
  const [css, setCss] = useState("");
  const [js, setJS] = useState("");
  const htmlTemplate = useRef();
  const cssTemplate = useRef();
  const jsContainerRef = useRef(); // 用于存放动态生成的脚本

  // 更新HTML内容
  useEffect(() => {
    if (htmlTemplate.current) {
      htmlTemplate.current.innerHTML = html;
    }
  }, [html])

  // 更新CSS内容
  useEffect(() => {
    if (cssTemplate.current) {
      cssTemplate.current.innerHTML = css;
    }
  }, [css])

  // 动态执行JS代码
  useEffect(() => {
    if (!jsContainerRef.current) return;

    // 清除之前的脚本，避免重复执行
    jsContainerRef.current.innerHTML = '';
    if (!js.trim()) return;

    // 创建新的script元素并执行
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.textContent = js;
    jsContainerRef.current.appendChild(script);
  }, [html, js]) // 依赖HTML，确保元素渲染完成后再执行JS

  return (
    <>
      <div className="editor">
        <div 
          contentEditable 
          className="code" 
          onInput={e => setHtml(e.target.innerHTML)}
          placeholder="输入HTML代码"
        ></div>
        <div 
          contentEditable 
          className="code" 
          onInput={e => setCss(e.target.innerHTML)}
          placeholder="输入CSS代码"
        ></div>
        <div 
          contentEditable 
          className="code" 
          onInput={e => setJS(e.target.innerHTML)}
          placeholder="输入JavaScript代码"
        ></div>
      </div>
      <div className='container' ref={htmlTemplate}></div>
      <style ref={cssTemplate}></style>
      {/* 动态脚本容器 */}
      <div ref={jsContainerRef}></div>
    </>
  );
}

export default App;

关键改动说明 #

• 动态创建script标签：每次JS内容更新时，生成新的script元素插入DOM，浏览器会自动执行新脚本，解决静态标签无法重新执行的问题。
• 同步执行时机：将JS的useEffect依赖添加html，确保HTML元素渲染完成后再执行JS，避免找不到目标元素的错误。
• 保留代码格式：改用innerHTML获取编辑器内容，保留换行、缩进等格式，避免因格式丢失导致的JS语法错误。

额外优化建议 #

在App.css中添加以下样式，让代码编辑区域的格式显示更友好：

.code {
  white-space: pre-wrap;
  min-height: 120px;
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  margin-bottom: 10px;
  font-family: monospace;
}

内容的提问来源于stack exchange，提问作者Gnaneshwar