如何在React应用中嵌入同事开发的Plotly Dash组件？

方案1：使用iframe直接嵌入 #

这是最快速的实现方式，无需修改现有Dash代码：

• 让同事将他的Dash应用部署完成（比如用gunicorn、waitress或Dash Enterprise），获取可公开访问的应用URL
• 在你的React组件中，通过<iframe>标签嵌入该URL，按需设置宽高与样式：

import React from 'react';

const EmbeddedDash = () => {
  return (
    <iframe
      src="http://your-colleague-dash-app-url"
      width="100%"
      height="600px"
      frameBorder="0"
      title="Embedded Dash Visualization"
    />
  );
};

export default EmbeddedDash;

• 跨域注意事项：如果React应用与Dash应用部署在不同域名下，需要在Dash端配置CORS，借助flask-cors实现：

from flask_cors import CORS
import dash

app = dash.Dash(__name__)
CORS(app.server)

方案2：通过API获取图表数据，用React-Plotly.js渲染 #

若希望图表与React应用样式更统一，可让同事开放API接口返回Plotly图表的figure数据：

• 同事在Dash应用中添加一个Flask路由，输出JSON格式的figure数据：

import plotly.graph_objects as go
from flask import jsonify

@app.server.route('/api/chart-data')
def get_chart_data():
    # 此处复用同事原本生成Dash组件的figure逻辑
    fig = go.Figure(data=[go.Scatter(x=[1,2,3], y=[4,5,6])])
    return jsonify(fig.to_dict())

• 你在React应用中请求该接口，用react-plotly.js组件渲染图表：

import React, { useState, useEffect } from 'react';
import Plot from 'react-plotly.js';

const DashChart = () => {
  const [chartData, setChartData] = useState(null);

  useEffect(() => {
    fetch('http://your-colleague-dash-app-url/api/chart-data')
      .then(res => res.json())
      .then(data => setChartData(data));
  }, []);

  return chartData ? (
    <Plot data={chartData.data} layout={chartData.layout} />
  ) : (
    <div>Loading chart...</div>
  );
};

export default DashChart;

方案3：将Dash组件打包为Web Component（深度集成） #

如果需要双向交互或更原生的组件体验，可将Dash组件打包为Web Component：

• 同事使用dash-component-boilerplate工具，将他的Dash组件打包为标准Web Component，生成对应的JS文件
• 你将该JS文件引入React应用（如放在public目录，在index.html中通过<script>标签加载）
• 在React组件中直接使用Web Component标签：

import React from 'react';

const DashWebComponent = () => {
  return <custom-dash-component param="your-value" />;
};

export default DashWebComponent;

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