我是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 标签中，我将渲染我的 React 应用程序，但在运行它并检查生成的 HTML 后，我可以看到所有 js 库的导入均未加载。
之后，在我的根组件中，我使用 document.createElement('script') 手动添加了每个脚本标记并填充它，但每次更新 DOM 时，脚本部分都会消失。
您能给我一些关于如何执行此操作或解决此问题的最佳方法的建议吗？
如果您需要我分享更多信息，请告诉我？
问候
最佳答案
我建议你在 React 组件中导入 js 文件，而不是在 html 页面中加载 js。
您可以尝试https://github.com/shaneosullivan/ReactDependentScript/
每次我需要将外部js导入到我的react组件中时，我都会使用这个插件。您可以尝试给出的示例。
关于javascript - React根组件不会加载整个index.html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47949483/