如何将startbootstrap集成到react组件中？

Question

我正在开发一个 React 组件，该组件包含来自 此链接的 StartBootstrap 模板。这是理想页面的完整图片：

我在 public 文件夹内组织了 css、js 和 assets 文件夹，以确保模板正确呈现。以下是我如何构建资产：

我已将如下 CSS 和 JS 脚本包含到我的

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, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Dashboard - SB Admin</title>
   <!-- <link rel="stylesheet" href="%PUBLIC_URL%/start-bootstrap-assets/css/style.css" />-->



    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/style.min.css" rel="stylesheet" />
    <link href="css/styles.css" rel="stylesheet" />
    <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>

  </head>
  <body class="sb-nav-fixed">
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    
    <!--<script src="%PUBLIC_URL%/start-bootstrap-assets/js/script.js"></script> -->

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
    <script src="js/scripts.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
    <script src="assets/demo/chart-area-demo.js"></script>
    <script src="assets/demo/chart-bar-demo.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/simple-datatables.min.js" crossorigin="anonymous"></script>
    <script src="js/datatables-simple-demo.js"></script>
  </body>
</html>

然而，尽管我努力了，HTML 页面还是出现了如下图所示的损坏：

我在控制台中看到以下与

chart.min.js

相关的错误：

Uncaught TypeError: Cannot read properties of null (reading 'length')
    at Object.acquireContext (Chart.min.js:7:76631)
    at ni.construct (Chart.min.js:7:92209)
    at new ni (Chart.min.js:7:91964)
    at chart-area-demo.js:7:19

所以，我认为，我的项目中仍然有一些

chart.min.js

没有得到正确解决。

任何人都可以指导我如何在我的 React 应用程序中正确设置这些资源以实现所需的布局吗？

链接到 Github 中的完整代码以重现此问题！

更新：由于图表和表格的数据未加载，我认为，这是资产文件夹未正确加载到应用程序中。

Answer 1

您将资产放入公共文件夹中。根据 Create-React-App 文档，您需要使用带有

public

的

%PUBLIC_URL%

文件夹，如下所示：https://create-react-app.dev/docs/using-the-public-folder/

<script src="%PUBLIC_URL%/assets/js/scripts.js"></script>

如何将startbootstrap集成到react组件中？

问题描述投票：0回答：1

1个回答

最新问题

如何将startbootstrap集成到react组件中？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1