Question

在从一些在线教程学习React之后，我开始构建一个演示项目。请从ReactComponent中考虑下面的代码行。

ReactDOM.render(<Home/>, document.getElementById('container'));

这会在目标DOM元素容器中呈现React组件 Home 。所有在线教程都显示这在一些index.html文件中呈现。代码如何知道，在哪个HTML（文档）文件中找到DOM元素容器。以下是我收到的错误的屏幕截图。

下面是我的index.html，它是脚手架中的默认值。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!--
      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`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></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`.
    -->
  </body>
</html>

Answer 1

使用React，就像所有JavaScript一样，它通过HTML文件加载到文件中（即HTML文件首先出现）。您的JavaScript通常会导入<script>标记。这是HTML文件当前在浏览器中打开它应该查看。

因此，对于HTML文件，您应该在浏览器中打开这样的内容：

<!DOCTYPE html>
<head>
  <script src="./src/Home.js"></script>
<body>
  <div id="container"></div>

打开它，假设JS路径正确，应该可以正常工作。

ReactDOM.render（）查询

1 个答案: