Question

我有一个简单的React网站，当我在Chrome中转到“查看源代码”时，它并没有显示很多标记。大部分是JS导入。但是，如果我单击了具有开发工具的元素，它就会向我显示通常所见的html。谁可以给我解释一下这个？谢谢

Answer 1

查看源将包含您在build/index.html或public/index.html中所拥有的内容

index.html将带有一些<script>标签。浏览器在script标签中执行这些JavaScript文件并呈现页面。我们可以说这是动态代码或运行时生成的html，css和其他代码。

因此，View Source将仅显示静态内容，即index.html中的内容。就像您在记事本等任何编辑器中打开index.html一样。

与使用开发工具时一样，您将看到所有运行时生成的代码。这就是开发工具想要做的。

如果需要查看React组件，状态，道具和其他详细信息，则需要使用React dev tools for chrome

一个简单的例子是：

index.html

<html>
  <body>
    <div id="app"></div>
    <script>
     document.getElementById("app").innerHTML = "Hello World";
    </script>
  </body>
</html>

您将在“查看源代码”中看到以上代码。

您将在开发工具中看到以下代码

<html>
  <body>
    <div id="app">Hello World</div>
    <script>
     document.getElementById("app").innerHTML = "Hello World";
    </script>
  </body>
</html>

希望这很清楚。

Answer 2

实际来源主要是JS，介于使用用途的库，您导入的库和您编写的JS之间。

当您编写视图（通常以.jsx格式）时，是将JS转换为HTML。因此，在通过使用库和您编写的内容组合来填充dom之后，可以在DOM中查看html，但是源仍将仅显示JS。

Sudo示例

example.jsx

...
render() {
  const example = ['a', 'b', 'c'];
  return ( <div> { example.map((val) => (<p>{val}</p>)) } </div> }
}
...

来源

...
require('example.js')
...

DOM

...
<div>
  <p>a</p>
  <p>b</p>
  <p>c</p>
</div>
...

在浏览器Newbe React中查看源代码

2 个答案: