Question

我刚刚开始学习ReactJS，并按照一个教程制作了我的第一个应用程序，但是当我运行html文件时，屏幕上没有任何显示。

index.js

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

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

index.html

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

Answer 1

在这里，我认为您需要以从HTML文件中调用的函数形式编写代码。

因此，您需要将index.js更新为：

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

window.printHello = function(id){
   ReactDOM.render(
   <h1>Hello, world!</h1>,
   document.getElementById(id)
   );
 }

您的html文件应更新为以下代码：

<div id="hello"></div>
<script src="index.js"></script>
<script>
 printHello('hello');
</script>

Answer 2

这是您查询的另一种解决方案。无需在HTML中添加脚本标签。

如果js和HTML是同一组件的一部分，则可以直接在HTML中直接使用id。因此，您更新的js和HTML代码将类似于以下内容。

innerHTML

以及HTML代码：

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

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

我希望这会对您有所帮助。

反应不在DOM上渲染任何东西

2 个答案: