Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I render HTML from another file in a React component?

Is it possible to render HTML from another file in a React component?

I have tried the following, but it does not work:

var React = require('react');  /* Template html */ var template = require('./template');  module.exports = React.createClass({     render: function() {         return(             <template/>         );     } }); 
like image 916
Emir Marques Avatar asked Nov 28 '15 16:11

Emir Marques


People also ask

Can I render HTML file in React?

In vanilla javascript, you have the innerHTML property to set or return the HTML content (inner HTML) of an element. In React, you can use dangerouslySetInnerHTML to let React know that the HTML inside of that component is not something it cares about.

HOW include HTML file in React component?

If you want to include static html in ReactJS. You need to use html-loader plugin if you are using webpack to serve your react code. That is it. Now you can use static html files to load your html files in react.

Can I have multiple HTML files in React?

So far I've learned that React native doesn't support multiple HTML pages because it's an single page application.

How use HTML page in React?

There may be an instance where you would want to display HTML inside a React Component. The HTML could be from an external source or a file that you want to display to the user. By default, React does not permit you to inject HTML in a component, for various reasons including cross-site scripting.


2 Answers

If your template.html file is just HTML and not a React component, then you can't require it in the same way you would do with a JS file.

However, if you are using Browserify — there is a transform called stringify which will allow you to require non-js files as strings. Once you have added the transform, you will be able to require HTML files and they will export as though they were just strings.

Once you have required the HTML file, you'll have to inject the HTML string into your component, using the dangerouslySetInnerHTML prop.

var __html = require('./template.html'); var template = { __html: __html };  React.module.exports = React.createClass({   render: function() {     return(       <div dangerouslySetInnerHTML={template} />     );   } }); 

This goes against a lot of what React is about though. It would be more natural to create your templates as React components with JSX, rather than as regular HTML files.

The JSX syntax makes it trivially easy to express structured data, like HTML, especially when you use stateless function components.

If your template.html file looked something like this

<div class='foo'>   <h1>Hello</h1>   <p>Some paragraph text</p>   <button>Click</button> </div> 

Then you could convert it instead to a JSX file that looked like this.

module.exports = function(props) {   return (     <div className='foo'>       <h1>Hello</h1>       <p>Some paragraph text</p>       <button>Click</button>     </div>   ); }; 

Then you can require and use it without needing stringify.

var Template = require('./template');  module.exports = React.createClass({   render: function() {     var bar = 'baz';     return(       <Template foo={bar}/>     );   } }); 

It maintains all of the structure of the original file, but leverages the flexibility of React's props model and allows for compile time syntax checking, unlike a regular HTML file.

like image 110
Dan Prince Avatar answered Oct 09 '22 19:10

Dan Prince


You can use the dangerouslySetInnerHTML property to inject arbitrary HTML:

// Assume from another require()'ed module:  var html = '<h1>Hello, world!</h1>'    var MyComponent = React.createClass({    render: function() {      return React.createElement("h1", {dangerouslySetInnerHTML: {__html: html}})    }  })    ReactDOM.render(React.createElement(MyComponent), document.getElementById('app'))
<script src="https://fb.me/react-0.14.3.min.js"></script>  <script src="https://fb.me/react-dom-0.14.3.min.js"></script>  <div id="app"></div>

You could even componentize this template behavior (untested):

class TemplateComponent extends React.Component {   constructor(props) {     super(props)     this.html = require(props.template)   }    render() {     return <div dangerouslySetInnerHTML={{__html: this.html}}/>   }  }  TemplateComponent.propTypes = {   template: React.PropTypes.string.isRequired }  // use like <TemplateComponent template='./template.html'/> 

And with this, template.html (in the same directory) looks something like (again, untested):

// ./template.html module.exports = '<h1>Hello, world!</h1>' 
like image 31
Jon Surrell Avatar answered Oct 09 '22 19:10

Jon Surrell