如何将外部库添加到reactjs？

Question

将哪个外部JS库添加到reactjs组件有哪些选项？例如，如果我们有任何库文件，例如example.js，并且只有一个反应组件使用它，那么我想在index.html或组件级别添加此库。我想知道如何在组件级别包含。

Answer 1

您可以这样使用：

import abc from './abc.js'

点击此处：How to include external javascript library in reactjs

Answer 2

通过“外部库”，我假设您正在讨论npm / yarn存储库，例如：

$ npm install moment（Moment.js）

在这些情况下，您希望将其导入为：

import moment from 'moment'

可以看到同一个包中的另一个例子here

Answer 3

1. 最简单的方法是找出您的外部库是否有npm模块，如果是这样，您只需执行npm install。
2. 否则，您可以在index.html中添加指向此库的链接。
3. 否则，您可以下载外部库的文件并在其中使用，就像它自己的代码一样（更好地检查它的免费库是否可以这样做）。在这种情况下，您只需import文件
即可

Answer 4

托管的客户端库

如果要导入客户端托管库，唯一的选择是将其包含在index.html中。

例如，如果我们想将D3包含在我们的组件之一中，可以将<script src="https://d3js.org/d3.v5.min.js"></script>添加到/public/index.html 然后要从组件内部使用它，您需要调用window.d3而不是d3

非托管客户端库

如果您有未托管的库，则始终可以将其保存到其自己的文件中。完成此操作后，只需像导入其他任何本地文件import some_library from "./path/to/some/library"

一样导入即可