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

by

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.

More Related Contents:

  1. Perform debounce in React.js
  2. Adding script tag to React/JSX
  3. React – uncaught TypeError: Cannot read property ‘setState’ of undefined
  4. Passing custom props to router component in react-router v4
  5. Why is my React component is rendering twice?
  6. ReactJS: Maximum update depth exceeded error
  7. What does three dots do in ReactJS [duplicate]
  8. Why is my onClick being called on render? – React.js
  9. what is right way to do API call in react js?
  10. REACT – toggle class onclick
  11. How to display binary data as image in React?
  12. Sending Request body for GET method in AXIOS throws error
  13. Recommended way of making React component/div draggable
  14. React: why child component doesn’t update when prop changes
  15. How to store Configuration file and read it using React
  16. React: trigger onChange if input value is changing by state?
  17. Is store.dispatch in Redux synchronous or asynchronous
  18. How do I setState for nested object?
  19. Accessing event.target inside callback in react
  20. What is prevState in ReactJS?
  21. this.setState is not a function [duplicate]
  22. React-router – How to pass data between pages in React?
  23. React: Passing props to function components
  24. render html in state string [duplicate]
  25. React + Firestore : Return a variable from a query
  26. React Hooks useState+useEffect+event gives stale state
  27. How to add “refs” dynamically with react hooks?
  28. Toggle Class in React
  29. How to deploy a React + NodeJS Express application to AWS?
  30. ReactJS Bootstrap Navbar and Routing not working together

Leave a Comment