在React项目中使用PyScript引入Python文件时出错求助

核心问题分析 #

React通过dangerouslySetInnerHTML插入DOM后，PyScript不会自动重新扫描并初始化这些标签——因为PyScript默认只在页面首次加载时完成一次标签扫描。另外你的demo.py中直接操作DOM的方式也不符合PyScript的规范，再加上可能存在的路径错误，导致了报错。

分步解决方案 #

1. 确保PyScript正确加载

先在React项目的public/index.html中提前引入PyScript的CDN资源，保证在React组件渲染前PyScript已加载完成：

<head>
  <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
  <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>

2. 手动触发PyScript初始化

在React组件中，利用useEffect钩子在DOM插入完成后，手动调用PyScript的初始化方法：

import { useEffect, useRef } from 'react';

function PyScriptWrapper() {
  const pyContainerRef = useRef(null);

  useEffect(() => {
    // 确保PyScript已加载，再触发容器内标签的初始化
    if (window.PyScript && pyContainerRef.current) {
      window.PyScript.runAll(pyContainerRef.current);
    }
  }, []);

  const pyHtml = `
    <div id="today"></div>
    <py-script src='/demo.py'></py-script>
    <py-repl></py-repl>
  `;

  return (
    <div ref={pyContainerRef} dangerouslySetInnerHTML={{ __html: pyHtml }} />
  );
}

export default PyScriptWrapper;

3. 修正demo.py的DOM操作逻辑

PyScript提供了专门的Element类用于操作DOM，不要直接使用原生JS的document.getElementById，修改demo.py内容：

import datetime
from pyscript import Element

def show_time():
    current_time = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
    # 使用PyScript的Element类操作DOM
    Element("today").write(current_time)

show_time()

4. 修正脚本路径

将demo.py放在React项目的public目录下，这样路径使用/demo.py才能被正确访问（React的public目录是静态资源的根目录）。

5. 避免React重新渲染重置PyScript

如果组件会频繁重新渲染，建议用useRef锁定容器DOM，或者通过条件渲染控制dangerouslySetInnerHTML只执行一次，防止PyScript实例被反复销毁重建。

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