React根组件不会加载整个index.html
我是新用的reactjs。我有一个模板，我需要在头部加载一些css和身体的末尾，我需要加载一些js库和插件，但这最后一部分不起作用。让我告诉你我的index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
<meta content="" name="description" />
<meta content="" name="author" />
<link href="assets/plugins/jquery-ui/themes/base/minified/jquery-ui.min.css" rel="stylesheet" />
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<link href="assets/plugins/ionicons/css/ionicons.min.css" rel="stylesheet" />
<link href="assets/css/animate.min.css" rel="stylesheet" />
<link href="assets/css/style.min.css" rel="stylesheet" />
<link href="assets/css/style-responsive.min.css" rel="stylesheet" />
<link href="assets/css/theme/default.css" rel="stylesheet" id="theme" />
<link rel="stylesheet" href="assets/plugins/gritter/css/jquery.gritter.css" />
<script src="assets/plugins/pace/pace.min.js"></script>
<link href="assets/plugins/isotope/isotope.css" rel="stylesheet" />
<link href="assets/plugins/lightbox/css/lightbox.css" rel="stylesheet" />
<script src="assets/plugins/pace/pace.min.js"></script>
<title>Nautam Manager</title>
</head>
<body id="nbody">
<div id="root">
<div id="page-loader" class="fade in"><span class="spinner"></span></div>
</div>
<!-- ================== BEGIN BASE JS ================== -->
<script src="assets/plugins/jquery/jquery-1.9.1.min.js"></script>
<script src="assets/plugins/jquery/jquery-migrate-1.1.0.min.js"></script>
<script src="assets/plugins/jquery-ui/ui/minified/jquery-ui.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="assets/crossbrowserjs/html5shiv.js"></script>
<script src="assets/crossbrowserjs/respond.min.js"></script>
<script src="assets/crossbrowserjs/excanvas.min.js"></script>
<![endif]-->
<script src="assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="assets/plugins/jquery-cookie/jquery.cookie.js"></script>
<script src="assets/plugins/gritter/js/jquery.gritter.js"></script>
<!-- ================== END BASE JS ================== -->
<!-- ================== BEGIN PAGE LEVEL JS ================== -->
<script src="assets/plugins/isotope/jquery.isotope.min.js"></script>
<script src="assets/plugins/lightbox/js/lightbox.min.js"></script>
<script src="assets/js/gallery.demo.min.js"></script>
<script src="assets/js/apps.min.js"></script>
<!-- ================== END PAGE LEVEL JS ================== -->
<script>
$(document).ready(function() {
App.init();
Gallery.init();
});
</script>
</body>
</html>
在我的根div标签是我要渲染我的反应应用程序，但在运行它并检查生成的HTML后，我可以看到所有js库的导入未加载。
之后，在我的Root组件中，我使用document.createElement（'script'）手动添加了每个脚本标记并填充它，但每次更新DOM时，脚本部分都会消失。
您能否就我如何做到这一点或者解决这个问题的最佳方法给出一些建议？
如果您需要我分享更多信息，请告诉我？
问候
回答如下：我建议你在你的html页面中导入你的React组件中的js文件，而不是加载js。
你可以尝试https://github/shaneosullivan/ReactDependentScript/
每次我需要将外部js导入到我的react组件中时，我都使用过这个插件。您可以尝试给出的示例。