React.js在主div应用程序之前prerender html标记

经历艰难时期学习React。所以我开始用React重写简单的HTML + JavaScript页面。
我想在主应用程序的div之前预渲染html标记。我发现使用自定义字体（简单线条图标）的库不会以我已经完成的方式加载。但是如果我把这个<div className="loadicon icon-arrow-left wow tada infinite" data-wow-duration="8s"></div> div放在一个组件里面，字体加载的很好。下面是index.html的代码现在的样子：React.js在主div应用程序之前prerender 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>

左右，任务只是perrender这段代码：

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

如何它可以在简单做办法？需要一个工作示例请

来源

2017-09-15 Kuzma

好吧，我已经通过将html代码移动到应用程序的第一个子组件来解决它。

来源

2017-10-04 10:33:28 Kuzma

React.js在主div应用程序之前prerender html标记

回答

相关问题