脚本.js无法在我的创建反应应用程序中加载

Question

我对编码很陌生，我目前正试图解决来自frontenmentor的挑战。我的任务是构建一个ip地址跟踪器.

为了让这个任务对我来说更困难一点，我试图通过create-react-app用React框架构建这个应用程序。

我的问题是，我的Javascript文件，script.js，不知何故不工作。我试图通过script标签在我的index.html实现它。

<script src="../src/script.js"></script>

你也可以查看目录结构，我刚刚在GitHub上更新了项目。
https://github.com/bryanhain97/ip-address-tracker

谢谢你。

Answer 1

如果你想在react的index.html文件中包含一个脚本，你必须把它放在public文件夹中，并使用%PUBLIC_URL%/path-to-script-relative-to-public-dir指定路径

编辑:

我刚刚看了你的项目，你应该做的不是在index.html中嵌入你的脚本，而是将其导入index.js。您可能应该导出initMap函数并从index.js

调用它。

Answer 2

OK。有几件事你做错了!首先，React在控制台中输出一些有用的信息，这些信息在发生故障时是不可忽略的。请看下面的图片。

1. 很明显，React正在抱怨缺少React导入。这是因为您需要

import React from 'react'

即使在函数组件中也是如此。我在两个地方发现了这个错误。

2. 您在script.js文件中使用的URL是错误的。请参阅下面我的工作目录的git差异。

3. 我不知道你想如何实现这一切，但我认为这不是REACT的方式!React是一个面向组件的库，所以，请检查其他一些替代方案，而不是使用直接连接到DOM元素的平面函数来做所有这些。ReactDOM有一些超级功能可以在这里使用。

我设法让应用程序工作在我自己的IP地址和谷歌的(见下面的屏幕截图)，虽然我认为你没有实现它在REACT的方式。所以，继续挖掘吧!

[React Error Output][1]
[Git diff of my work space with the fixes][2]
[Working App on my IP Address][3]
[Working App on Google's IP Address][4]
[1]: https://i.stack.imgur.com/gZB72.png
[2]: https://i.stack.imgur.com/xHqfU.png
[3]: https://i.stack.imgur.com/8BEzI.png
[4]: https://i.stack.imgur.com/xZENI.jpg