React 根组件不会加载整个 index.html

Posted 2023-03-07

技术标签:

【中文标题】React 根组件不会加载整个 index.html【英文标题】：React root component does not load the entire index.html 【发布时间】：2018-06-05 13:52:51 【问题描述】：

我是使用 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 库的导入都没有加载。

之后，在我的 Root 组件中，我使用 document.createElement('script') 手动添加了每个脚本标签并填充它，但每次更新 DOM 时，脚本部分都会消失。

您能给我一些建议，告诉我该怎么做或解决这个问题的最佳方法是什么？

如果您需要我分享更多信息，请告诉我？

问候

【问题讨论】：

【参考方案1】：

我建议你在你的 React 组件中导入 js 文件，而不是在你的 html 页面中加载 js。

你可以试试https://github.com/shaneosullivan/ReactDependentScript/

每次我需要将外部 js 导入我的 react 组件时，我都会使用这个插件。你可以试试给出的例子。

【讨论】：

以上是关于React 根组件不会加载整个 index.html的主要内容，如果未能解决你的问题，请参考以下文章