找到了 React 脚本，但它不会呈现简单的 hello world 元素答案

【问题标题】：React script is found but it won't render the simple hello world element找到了 React 脚本，但它不会呈现简单的 hello world 元素
【发布时间】：2022-01-11 08:44:03
【问题描述】：

我是新手，目前我只是在测试一个简单的渲染。我在浏览器中没有收到任何错误，但在我的 javascript 反应文件中出现的屏幕上没有显示任何内容。

html

<html>
    <head>
         <script  type="text/babel" src="reactfile.js"> testing</script>
    </head>
<link rel="stylesheet" href="/styles.css">
<body id="root">
    <p>react test</p>
</body>
</html>

反应 javascript 文件

import React from 'react';
import ReactDOM from 'react-dom';
class Helloworld extends React.Component {
  render() {
    return (
      <div>
        <p>Hello world!</p>
      </div>
    );
  }
}

ReactDOM.render(<Helloworld />, document.getElementById('root'));

【问题讨论】：

document.getElementById('root') 与 <body id="app">。您需要为两者使用相同的 ID。
ID 错误，但您还遗漏了几个重要信息，请查看dev.to/tmhao2005/…（第一个 Google 搜索结果，还有更多示例）。另请注意，这有利于快速测试，但您应该尽快远离它
嗨阿德里亚诺，我已经修复了 ID，但它没有反映在我粘贴的内容中。出现了一些其他问题，当我用谷歌搜索它们时，我意识到没有直接反应构建我需要 babel 和 browserify，特别是头部标签中的 cdn 链接以及反应 cdn 链接。我最终基本上做了你的链接描述的谢谢。我假设如果要构建一个应用程序，我不会使用链接中的建议，而是使用我假设的 create-react-app 构建功能？
@justaskin 是的，确实有少数情况下您可能需要这样做（即使那样......我也很难找到任何其他解决方案）。如果您正在学习，那么恕我直言，我首先会在不创建 React App 的情况下开始。它很方便，但样板文件很少，直接了解这几个步骤真的很有帮助。

标签： javascript html reactjs

【解决方案1】：

你告诉这一行的反应是，你将把一些 HTML 代码放在 id 为 root 的元素中：

ReactDOM.render(<Helloworld />, document.getElementById('root'));

但是，在您的 HTML 代码中，没有这样的元素。为了使其正常工作，只需将此元素（id 为 root）添加到您的页面，如下所示：

<body id="app">
  <div id="root"></div>
</body>

然后，您的 React 代码将生成的每个代码都将放入此元素中。

【讨论】：

你是对的我犯了一个错误，我本来已经修复了它，但是上传了一个错误的id。虽然它没有修复错误。我现在修复了它，并将编辑我的帖子。不过还是谢谢你。如果可以的话，我会支持你。
哦，我明白了！然后，您能否为我们提供一个可重现的示例，例如codesandbox.io？因为你提供的代码我无能为力
嗨 TheTisiboth，我解决了这个问题，除了错误的 id 之外，它需要合并来自 babel 的脚本并通过 cdn 链接做出反应。一个名叫阿德里安的用户链接了前面提到的东西。基本上我的 html 缺少这里提到的 head 元素中的脚本文件 dev.to/tmhao2005/… 不过感谢您的关注和帮助。
哦，我明白了，很高兴您解决了问题！

【解决方案2】：

制作 id 为“root”的 div 并在其下方添加脚本标签。 JavaScript 在解析它之前无法访问根 div，这意味着 JavaScript 无法找到未出现在 DOM 树中的元素。所以你应该把它的脚本代码放在body标签的行尾。

<body id="app">
    <p>react test</p>
    <div id="root></div>
    <script type="text/babel" src="reactfile.js"></script>
</body>

【讨论】：