How to convert html template which load external html to reactjs

Question

I'm working on web porject, I want to use reactjs, the template I'm using calls external js files which loads remote html file. for example

<header role="banner">
  <script type="text/javascript" src="/remote/webassets/js/header-footer.js"></script>
</header>

I thought of converting the above to react like the following

import React, {
  Component,
} from 'react';

// loads header and footer
class HF extends Component {

  render() {
    return (
      <header role="banner">
        <script type="text/javascript" src="/remote/webassets/js/header-footer.js"></script>
      </header>
    );
  }
}

export default HF;

my template

    <body>
  <header role="banner">
    <!-- loads header and footer -->
    <script type="text/javascript" src="/remote/webassets/js/header-footer.js"></script>
  </header>

  <div class="sidebar">
    <!-- loads sidebar menu  -->
    <script type="text/javascript" src="/remote/webassets/js/sidebar.js"></script>
  </div>

  <main>
    <!-- content -->
  </main>
  <footer class="footer"></footer>
  <script>
    $(window).load(function() {
      $('[data-class=lazyload]').each(function() {

        //* set the img src from data-src

        $(this).attr('href', $(this).attr('data-href'));


      });
      $('.lazyload').each(function() {

        //* set the img src from data-src

        $(this).attr('src', $(this).attr('data-src'));

      });
    });

    const loadScriptAsync = () {...};
    window.onload = loadScriptAsync

    (function() {
      'use strict';

      window.MyEvenArray = function(callback) {...};

      window.ErrorEvents = new window.MyEvenArray();

      window.onerror = function(msg, url, line, col, error) {
        ...
        window.ErrorEvents.push(d);
      };
    })();
  </script>
</body>

Is there a better way converting this to react or should I just stick to using plain html?

Is what you're trying to do dynamically load an external script to your page? — Garrett Motzner
– Garrett Motzner, Commented Mar 1, 2019 at 0:01

Reggie Snow · Accepted Answer · 2019-02-26 10:17:19Z

2

+25

There is an npm module that converts raw HTML into a react DOM structure:

html-to-react

It works by parsing the DOM elements and converting it to a React tree with one parent. Here is a basic example:

var ReactDOMServer = require('react-dom/server');
var HtmlToReactParser = require('html-to-react').Parser;

var htmlInput = '<div><h1>Title</h1><p>HTML contained within</p>
</div>';
var htmlToReactParser = new HtmlToReactParser();
var reactElement = htmlToReactParser.parse(htmlInput);
var reactHtml = ReactDOMServer.renderToStaticMarkup(reactElement);

assert.equal(reactHtml, htmlInput); // true

This seems to be the easiest way to implement, beyond using UNICODE.

edited Feb 26, 2019 at 10:17

answered Feb 26, 2019 at 10:09

Reggie Snow

1522 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Avinash Rathod · Accepted Answer · 2019-03-14 08:36:42Z

0

There is no need to use a third party plugin to render external HTML in ReactJS.

You can achieve it in the following way

function createMarkup() {
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

Note: Above comment solution by @Reggie Snow will increase your bundle size.

ReactJS doc to load external HTML: https://reactjs.org/docs/dom-elements.html

Please let me know if it works for you

edited Mar 14, 2019 at 8:36

answered Feb 26, 2019 at 10:29

Avinash Rathod

6105 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to convert html template which load external html to reactjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related