文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将加载外部html的html模板转换为reactjs

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

Stack Overflow用户

提问于 2019-02-23 22:21:48

回答 2查看 2.8K关注 0票数 4

我在web项目上工作，我想使用reactjs，我使用的模板调用加载远程html文件的外部js文件。例如

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

我的模板

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

有没有更好的方法将它转换为react，或者我应该坚持使用普通的html？

javascript

reactjs

回答 2

Stack Overflow用户

发布于 2019-02-26 18:09:55

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

html-to-react

它的工作原理是解析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

除了使用UNICODE之外，这似乎是最简单的实现方式。

票数 2

Stack Overflow用户

发布于 2019-02-26 18:29:30

在ReactJS中不需要使用第三方插件来呈现外部超文本标记语言。

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

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

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

注意:由@Reggie Snow提供的上述评论解决方案将增加您的包大小。

加载外部HTML的ReactJS文档：https://reactjs.org/docs/dom-elements.html

如果对你有效，请让我知道

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54842570

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将加载外部html的html模板转换为reactjsEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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