Can I render an HTML file inside a React component?

Question

Can I render an HTML file inside a React component?

Navigation

#1 by (1 votes)

0

My case is:

I have an HTML file that works perfectly, with all its scripts, functions ... My problem is to pass it to a React component. Because of that, is it possible to import this file to the React component, and render it in your view using the render () method?

It would be something like this:

import Prueba from './prueba.html'

export default class App extends Component {
    render() {
        return (
            <div id="prueba"/>
        )
    }
}
render(Prueba, document.getElementById('prueba'));

Any suggestions to solve this problem?

jquery html reactjs

asked by XXx 12.12.2016 в 16:01

source

1 answer

How to insert data from a json in a mysql table with phalcon? Help with basic C exercise

score 1 · Answer 1

You can use the dangerouslySetInnerHTML property to be able to insert an html element inside your component and / or tag.

Example

import Prueba from './prueba.html'

var htmlContenido= { __html: Prueba };

export default class App extends Component {
    render() {
        return (
            <div id="prueba" dangerouslySetInnerHTML={htmlContenido}/>
        )
    }
}
render(Prueba, document.getElementById('prueba'));

I hope it will help you, and be what you were looking for.