Question

我正在使用create-react-app中的默认启动项目，具有以下文件夹结构：

app
--public
----index.html
--src
----App.js
----components
-------map.js

我在index.html正文标记中添加了外部CDN库。但是，我对如何在map.js组件中使用此库的方法感到困惑。

只需在我的map.js中编写库方法，返回：

Failed to compile
./src/components/map.js
  Line 5:  'L' is not defined  no-undef

有没有什么方法可以在我的React组件中包含JS CDN库而不通过React Component实际导入库npm install？

Answer 1

您正在加载DOM中的组件，React不了解DOM。因此，您需要为DOM库创建一个包装器组件，并使用::ng-deep prop来访问它。如果您是初学者请单独使用React库，如果您需要第三方库，请首先阅读有关第三方库的React docs https://reactjs.org/docs/integrating-with-other-libraries.html。

顺便说一句，你看到的错误很可能是一个不能改变你的ES6类的babel错误，它无法找到你需要的库。我认为有配置全局环境的选项，所以它忽略了这些错误（但这可能意味着从cra中弹出）。

Answer 2

看一下这个链接：

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder

要引用公用文件夹中的资源，您需要使用特殊内容   变量名为PUBLIC_URL。

在index.html中，您可以像这样使用它：

仅限文件   ％PUBLIC_URL％前缀可以访问公用文件夹中的内容。如果   你需要使用src或node_modules中的文件，你必须复制   它在那里明确指出你打算使这个文件成为一个部分   构建。

当您运行npm run build时，Create React App将替换   ％PUBLIC_URL％具有正确的绝对路径，因此您的项目工作均匀   如果您使用客户端路由或将其托管在非根URL。

在JavaScript代码中，您可以使用process.env.PUBLIC_URL进行类似操作   用途：

它将以create-react-app首选的方式向您展示如何操作。

在React组件中使用静态脚本标记

2 个答案: