Question

我刚开始使用 React，在浏览器中显示代码时遇到了一些问题。我遵循了使用沙盒系统的教程，一切正常。在我的 IDE 中的一个预先存在的项目中尝试相同的方法没有成功。

我想显示一个简单的标题。这是我的 JS 代码：

import React from "react";
import ReactDOM from "react-dom";


ReactDOM.render(
    <h1>Heading</h1>,
    document.getElementById("root")
);

这是我的 HMTL：

<html lang="en">
    <head>
        <title>REACT</title>
        <link rel="stylesheet" href="stylesheets/styles.css">
    </head>


    <body>
        <div id="root"></div>
        <script src="../src/index.js" type="text/javascript"></script>
    </body>
</html>

现在，浏览器中不显示标题。样式表工作得很好。已正确添加依赖项。

感谢您的帮助！

Answer 1

您选择了错误的 ID。您应该将 root 更改为 testroot，反之亦然。如果您正确设置了 babel 配置，这应该可以正常工作。

ReactDOM.render(
    <h1>Heading</h1>,
    document.getElementById("testroot")
);

Answer 2

您已经使用具有 Node.js 模块分辨率的 ES6 模块编写了代码。它不会在浏览器中运行。

您需要使用 Babel 和 Webpack 将其转换为与浏览器兼容的 JavaScript，如in the tutorial 所述。（确保点击“可选：使用首选文本编辑器在本地进行操作的说明”文本）。

您使用的沙箱为您完成了所有设置。

为什么我的 React 代码没有显示在浏览器中？

2 个答案: