如何在React组件中加载带BioCircos交互脚本的完整HTML页面

我基于R语言BioCircos包生成了用于展示基因组防御系统的可视化HTML文件，文件内包含承载Circos图的DOM标签与配套交互脚本，原生支持鼠标悬停展示数据详情的交互能力。目前我通过Flask API将该文件传输至React.js组件，计划在应用页面内嵌展示该图表，但当前页面仅能渲染静态图形，配套的交互脚本完全无法触发生效。

已尝试的解决路径 #

• 方案一：将完整的HTML页面内容传输到组件，通过dangerouslySetInnerHTML或第三方InnerHTML类库的方式直接渲染
• 方案二：仅传输Circos画布、对应父级标签、2个和图表直接关联的脚本片段HTML，剩下的5个关联依赖脚本统一在React应用的全局head标签中引入

备注：因生成的图表HTML文件体积过大，无法直接作为正文附件上传。

目标React组件代码 #

import React, {Component} from "react";
import axios from "axios";
import InnerHTML from 'dangerously-set-html-content'

class CircosStrain extends Component {
    state = {
        file: null,
        loaded: false
    };

    componentDidMount() {
        axios
            .get(
                "http://127.0.0.1:8801/api/v1/strains/strainCircos/" + this.props.svnn,
            )
            .then(response => {
                this.setState({file: response.data});
                this.setState({loaded: true})
            });
    }

    render() {
        // return (<iframe dangerouslySetInnerHTML={{ __html: this.state.file}}/>);

        return (
           // <div dangerouslySetInnerHTML={{ __html: this.state.file }}/>
           <InnerHTML html={this.state.file} />
        )
    }
}

export default CircosStrain;

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