Javascript 如何将加载外部html的html模板转换为reactjs_Javascript_Reactjs

Javascript 如何将加载外部html的html模板转换为reactjs

javascript reactjs

Javascript 如何将加载外部html的html模板转换为reactjs,javascript,reactjs,Javascript,Reactjs,我正在处理web项目，我想使用reactjs，我使用的模板调用外部js文件，加载远程html文件。比如说 <header role="banner"> <script type="text/javascript" src="/remote/webassets/js/header-footer.js"></script> </header> 我考虑将上述内容转换为如下反应 import React, { Component, } fro

我正在处理web项目，我想使用reactjs，我使用的模板调用外部js文件，加载远程html文件。比如说

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

我考虑将上述内容转换为如下反应

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;

import-React{
组成部分，
}从"反应",；
//加载页眉和页脚
HF类扩展组件{
render（）{
返回(
);
}
}
输出默认高频；

我的模板

    <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>


$（窗口）。加载（函数（）{
$（'[data class=lazyload]'）。每个（函数（）{
//*从数据src设置img src
$（this.attr（'href'，$（this.attr（'data-href'））；
});
$（'.lazyload'）。每个（函数（）{
//*从数据src设置img src
$（this.attr（'src'，$（this.attr（'data-src'））；
});
});
const loadScriptAsync=（）{…}；
window.onload=loadScriptAsync
（功能（）{
"严格使用",；
window.MyEvenArray=函数（回调）{…}；
window.ErrorEvents=new window.MyEvenArray（）；
window.onerror=函数（消息、url、行、列、错误）{
...
window.ErrorEvents.push（d）；
};
})();

有没有更好的方法将其转换为react，还是我应该坚持使用纯html？

有一个npm模块，可以将原始html转换为react DOM结构：

它通过解析DOM元素并将其转换为具有一个父级的React树来工作。以下是一个基本示例：

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

var ReactDOMServer=require（'react-dom/server'）；
var HtmlToReactParser=require（'html-to-react'）。解析器；
var htmlInput='TitleHTML包含在
';
var htmlToReactParser=新的htmlToReactParser（）；
var reactElement=htmlToReactParser.parse（htmlInput）；
var reactHtml=ReactDOMServer.renderToStaticMarkup（reactElement）；
assert.equal（reactHtml，htmlInput）；//真的

除了使用UNICODE，这似乎是最容易实现的方法。

无需使用第三方插件在ReactJS中呈现外部HTML

您可以通过以下方式实现它

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

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

函数createMarkup（）{
返回{uuuhtml:'First·；Second'}；
}
函数MyComponent（）{
返回；
}

注：@Reggie Snow的上述注释解决方案将增加您的捆绑包大小

用于加载外部HTML的JS文档：

请让我知道它是否适用于您

您正在尝试将外部脚本动态加载到页面中吗？