Question

只能从HTML引用public文件夹中的文件。

我知道我无法在html文件（在公共文件夹中）中引用js文件（在src文件夹中）

我有一个普通的html页面index.html，它位于公用文件夹中，单击按钮时，我打开的故事又是位于公用文件夹中。现在我所有的react代码都在src文件夹中的story.js中（并且我无法将其添加到公共文件夹中，因为它无法识别react库）。我知道我无法将其导入stories.html。所以我的问题是，实现它的空闲方法是什么。

此外，我尝试过将单个页面模板创建到react组件中，但这很复杂，并且存在库冲突问题。

我是React的新手，不知道如何在网页模板中部分添加react组件。

stories.js文件内容

console.log("Hello World");

stories.html文件内容

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <link
      href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap"
      rel="stylesheet"
    />

    <!-- Theme Style
    <link rel="stylesheet" href="css/bootstrap.css" />

     -->
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <!-- Compiled and minified CSS -->

    <!-- Compiled and minified JavaScript -->

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root">Hello</div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.



    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.waypoints.min.js"></script>
    <script src="js/jquery.stellar.min.js"></script>

    <script src="js/main.js"></script>

    -->

    <script src="js/owl.carousel.min.js"></script>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/jquery-migrate-3.0.0.js"></script>
    <script src="js/popper.min.js"></script>
  </body>
</html>

从html文件中的src文件夹添加js文件的替代方法

0 个答案: