如何在React中通过Pyodide渲染Python Panel组件？

问题概述 #

我参考Panel官方文档的Pyodide WebAssembly示例，想在Next.js React应用中实现Panel组件渲染。基础的Python代码（返回字符串/数字）能正常运行，但尝试Panel滑块示例时，不清楚该返回什么才能让React渲染出滑块。

解决步骤 #

1. 调整Python代码，返回Panel组件的HTML表示 #

Panel组件无法直接通过普通返回值让React识别，需要生成组件对应的HTML字符串。修改src/App.js中的myPythonCodeString：

import panel as pn

# 初始化Panel扩展
pn.extension(sizing_mode="stretch_width")

# 创建滑块组件
slider = pn.widgets.IntSlider(start=0, end=10, name='Slider')
# 获取组件的HTML渲染字符串
slider_html = slider._repr_html_()
# 返回该HTML字符串
slider_html

2. 在React中注入HTML内容 #

Pyodide执行完成后，将返回的HTML字符串通过React的dangerouslySetInnerHTML属性渲染到DOM中：

// 执行Python代码并获取结果
const result = await pyodide.runPython(myPythonCodeString);
setPythonResult(result);

// 渲染部分
return (
  <div className="App">
    <h1>Pyodide + Panel in React</h1>
    {pythonResult && (
      <div dangerouslySetInnerHTML={{ __html: pythonResult }} />
    )}
  </div>
);

3. 加载Panel依赖资源 #

Panel组件需要对应的CSS和JS支持，可在项目的根_document.js（Next.js）或public/index.html中添加CDN资源：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/panel@latest/dist/panel.min.css">
<script src="https://cdn.jsdelivr.net/npm/panel@latest/dist/panel.min.js"></script>

4. 确保Pyodide安装Panel #

在Pyodide初始化后，先安装Panel包：

await pyodide.loadPackage('panel');

关键说明 #

• Panel的_repr_html_()方法是核心：它会生成包含组件DOM结构、样式和交互逻辑的完整HTML字符串，这是React能渲染Panel组件的关键
• 使用dangerouslySetInnerHTML是因为React默认禁止直接渲染HTML字符串，仅在信任的代码场景下使用
• 原问题对应的仓库旧版本可查看提交3c735653dda0e873f17a98d0fb74edaca367ca00，当前仓库已包含修复方案

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