React.js 在主要 div 应用程序之前预呈现 html 标记

Question

学习 React 时遇到困难。所以我开始用 React.
重写简单的 HTML + JavaScript 页面我想在主应用程序的 div 之前预呈现 html 标记。我发现带有自定义字体（简单行图标）的库不会以我完成此操作的方式加载。但是如果我把这个 <div className="loadicon icon-arrow-left wow tada infinite" data-wow-duration="8s"></div> div 放在一个组件中，字体就可以正常加载。这是 index.html 现在的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/preloader.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/simple-line-icons.css">
    <!--[if lt IE 9]>
    <script>
    (function(){
        var ef = function(){};
        window.console = window.console || {log:ef,warn:ef,error:ef,dir:ef};
    }());
    </script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv-printshiv.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-sham.js"></script>
    <![endif]-->
    <script>
        (function (i, s, o, g, r, a, m) {
            Google Analytics code            
        });         
    </script>
</head>
  <body data-spy="scroll">
      <div id="preloader">
          <div id="status_first">
              <div className="loadicon icon-arrow-left wow tada infinite" data-wow-duration="8s"></div>
          </div>
          <div id="status_second">
              <div className="wow tada infinite" data-wow-duration="8s">K</div>
          </div>
          <div id="status_third">
              <div className="loadicon icon-arrow-right wow tada infinite" data-wow-duration="8s"></div>
          </div>
      </div>    
    <div id="app">
    </div>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="js/jquery.nicescroll.min.js"></script>    
    <script src="js/plugins.js"></script>    
    <script src="//cdn.rawgit.com/noelboss/featherlight/1.7.8/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/detect_swipe/2.1.1/jquery.detect_swipe.min.js"></script>
    <script src="js/js.cookie.js" charset="utf-8" type="text/javascript"></script>
    <script src="js/jquery-lang.js" charset="utf-8" type="text/javascript"></script>            
  </body>
</html>

所以，任务就是渲染这段代码：

  <div id="status_first">
      <div className="loadicon icon-arrow-left wow tada infinite" data-wow-duration="8s"></div>
  </div>
  <div id="status_second">
      <div className="wow tada infinite" data-wow-duration="8s">K</div>
  </div>
  <div id="status_third">
      <div className="loadicon icon-arrow-right wow tada infinite" data-wow-duration="8s"></div>
  </div>

如何简单地完成？请需要一个工作示例

Answer 1

嗯，我已经通过将 html 代码移动到 App 的第一个子组件来解决它。

React.js 在主要 div 应用程序之前预呈现 html 标记

React.js prerender html markup before main div application

prerender

reactjs