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

Question

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               lt template  gt

User · Answer

You can use the dangerouslySetInnerHTML property to inject arbitrary HTML    x000D   x000D     Assume from another require   ed module  x000D  var html     lt h1 gt Hello  world  lt  h1 gt   x000D   x000D  var MyComponent   React createClass   x000D    render  function     x000D      return React createElement  h1    dangerouslySetInnerHTML     html  html    x000D      x000D     x000D   x000D  ReactDOM render React createElement MyComponent   document getElementById  app    x000D   lt script src  https   fb me react-0 14 3 min js  gt  lt  script gt  x000D   lt script src  https   fb me react-dom-0 14 3 min js  gt  lt  script gt  x000D   lt div id  app  gt  lt  div gt  x000D   x000D   x000D    You could even componentize this template behavior  untested    class TemplateComponent extends React Component     constructor props        super props      this html   require props template         render         return  lt div dangerouslySetInnerHTML     html  this html    gt          TemplateComponent propTypes       template  React PropTypes string isRequired       use like  lt TemplateComponent template    template html   gt    And with this  template html  in the same directory  looks something like  again  untested         template html module exports     lt h1 gt Hello  world  lt  h1 gt

User · Answer

You can use dangerouslySetInnerHTML to do this  import React from  react   function iframe         return             html    lt iframe src  quot   Folder File html quot  width  quot 540 quot  height  quot 450 quot  gt  lt  iframe gt             export default function Exercises         return            lt div gt               lt div dangerouslySetInnerHTML  iframe      gt           lt  div gt      HTML files must be in the public folder

User · Answer

You could do it if template is a react component   Template js  var React   require  react     var Template   React createClass       render  function            return   lt div gt Mi HTML lt  div gt               module exports   Template    MainComponent js  var React   require  react    var ReactDOM   require  react-dom    var injectTapEventPlugin   require  react-tap-event-plugin    var Template   require    Template       Needed for React Developer Tools window React   React     Needed for onTouchTap   Can go away when react 1 0 release   Check this repo    https   github com zilverline react-tap-event-plugin injectTapEventPlugin     var MainComponent   React createClass       render  function             return               lt Template  gt                           Render the main app react component into the app div     For more details see  https   facebook github io react docs top-level-api html react render ReactDOM render     lt MainComponent   gt     document getElementById  app         And if you are using Material-UI  for compatibility use Material-UI Components  no normal inputs

User · Answer

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         lt div dangerouslySetInnerHTML  template    gt                   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   lt div class  foo  gt     lt h1 gt Hello lt  h1 gt     lt p gt Some paragraph text lt  p gt     lt button gt Click lt  button gt   lt  div gt    Then you could convert it instead to a JSX file that looked like this   module exports   function props      return        lt div className  foo  gt         lt h1 gt Hello lt  h1 gt         lt p gt Some paragraph text lt  p gt         lt button gt Click lt  button gt       lt  div gt            Then you can require and use it without needing stringify   var Template   require    template     module exports   React createClass     render  function         var bar    baz       return         lt Template foo  bar   gt                   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

User · Answer

It is common to have components that are only rendering from props  Like this   class Template extends React Component    render         return  lt div gt this props something lt  div gt          Then in your upper level component where you have the logic you just import the Template component and pass the needed props  All your logic stays in the higher level component  and the Template only renders  This is a possible way to achieve  templates  like in Angular   There is no way to have  jsx file with jsx only and use it in React because jsx is not really html but markup for a virtual DOM  which React manages

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

Examples related to javascript

Examples related to reactjs