How to call a full html page into a React component

user_15452172 0
Viewed 1129

I've created an html file with an R package that is called BioCircos (represents defense systems on a genome). The html file includes an tag that contains the Circos graph and scripts, that lets the user see more information in hover mode. I'm sending the file through Flask API to React.js Component in order to view it on the application. However, I can only present the picture without the scripts. I have tried the below steps:

  1. sending the entire html page to the component and used dangerouslySetInnerHTML or InnerHTML.
  2. send partial html file that includes only the and his parent tags, and two related scripts, moreover I've put 5 more related scripts to the head tag of the application. I'm attaching the react component we want to put the picture in, and the html file in the link (it's too big for here).

Link to the HTML file - https://drive.google.com/file/d/1ZAcK3o-4Kwmw2NzsRohO9IqjFheYSwU-/view?usp=sharing

StrainCircos


    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;
reactjs bioinformatics html javascript
1 Answers

Probably the iframe approach would be easier.

The problem in the commented-out iframe approach is trying to set the iframe content using the innerHTML property. If the content you want to display is available through a URL, like in the example, it would be easiest to just set the iframe src attribute.

<iframe src={"http://127.0.0.1:8801/api/v1/strains/strainCircos/" + this.props.svnn}/>

If you cannot use the src attribute (for example if you want to use content which is not available through a URL or you need to modify the content after retrieving it), you could perhaps use the srcdoc attribute.

<iframe srcdoc={this.state.file}/>

Or, if you need to support Internet Explorer, which does not support the srcdoc attribute, you could construct a data url.

user_918220
Related