个人中心
gpt4 book ai didi

reactjs - 如何在 react 中使用/包含第三方库？

转载 作者：行者123 更新时间：2023-12-03 13:19:58 24 4
gpt4 key购买 nike

我想使用jQuery和其他不是React本身的第三方库。如何在我的React项目中使用它们？我读到componentDidMount是调用第三方库的好地方。

不幸的是，即使我已经正确地将脚本标签链接到index.html文件中的那些库中，但由于不断收到“未定义”错误，所以无法使用这些库。

最佳答案

您有两个选择，均由一个人为设计的示例演示，其中我使用jQuery淡出了无序列表。两种方法都各有利弊，我先介绍两种方法，然后提供我的选择。

选项1：在您的index.html文件中包含第三方库

index.html

<head>
    ...
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    ...
</head>


App.jsx 

import React, { Component } from "react";

class App extends Component {
  componentDidMount() {
    // ** following two lines of code do the same thing
    // using the first version, however, could potentially cause errors
    // see "Referencing unimported libraries when using create-react-app"
    $(this.refs.list).fadeOut(); // version 1
    window.$(this.refs.list).fadeOut(); // version 2
  }

  render() {
    return (
      <ul ref="list">
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));




使用 create-react-app时引用未导入的库

**如果使用 create-react-app搭建项目，则使用第一个版本的代码将引发错误。这是因为 create-react-app的默认语法linter（eslint）如果您尝试引用未导入的代码（例如，因为我们在 import $ from "jquery"中引用了库，所以您从不会 index.html），则在项目编译期间会引发错误。因此，当我们引用jQuery的全局 $引用（在浏览器中使用jQuery时，这很正常）时，我们违反了在Node.js上构建模块化JavaScript应用程序的基本原理。在Node中，模块是一种生活方式，在这些模块中，我们只能引用我们显式导入的对象。在没有明确提及的情况下，我们在技术上违反了惯例，因此也就少了一些抱怨。

现在，您和我都知道，一旦应用程序实际在浏览器中运行， $引用将变得可用。调用 componentDidMount()时，视图已安装到DOM上，您的第三方库（在我们的示例jQuery中）可供引用。不幸的是，lint会阻止您的react应用呈现，因为它认为您正在尝试引用未定义的变量。此外，lint与平台无关，并且不知道您的应用程序正在浏览器中运行（因为JavaScript不再是仅用于浏览器的语言）。这可能很烦人，但短绒棉正在做它的工作，并且在某种程度上，这是绝对正确的。

为避免此错误，有几种选择：


让eslint（所提供的linter）忽略您所做的行
使用 // eslint-disable-next-line引用第三方库（不推荐）
， 要么
使用 window（首选），或
关闭短绒（不是首选），或者
请勿使用create-react-app（您的偏好，不建议初学者或专家使用）。


如果您大量调用第三方库，则第一个选项很容易成为麻烦。如果您阅读 componentDidMount，您将知道在调用这一点上，您现在可以访问 window变量。如果库将自身附加到DOM的全局 window对象，则可以通过 window访问您的库。在我们的示例中，jQuery就是这样做的，我们可以通过 window.$访问jQuery的功能。

选项2：使用 npm install <package-name> -S和 import库将库安装到相关的项目文件中。

终奌站 

npm i jquery -S


App.jsx 

import React, { Component } from "react";
import $ from "jquery";


class App extends Component {
  componentDidMount() {
    $(this.refs.list).fadeOut();
  }

  render() {
    return (
      <ul ref="list">
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));




什么是正确的方法？

每种方法都有优点和缺点：使用第一种方法，您可以使用CDN上托管的库，并可以利用网络效应，而无需将第三方代码导入到您的代码库中。使用后者，您可以使您的代码更具可读性，并且可以避免棉绒爆炸。

对于缺点，第一种方法可能要求您在使用lint的情况下将 window添加到第三方库调用中（您可能应该这样做）；在后者的情况下，有时第三方库没有可通过npm安装的项目代码，因此您必须手动下载它们并将它们手动添加到项目源文件夹中。在这种情况下，使用第一种方法可能很有意义，这样您就不必在发布新版本的库时手动导入它们。

如果在所有这些操作的最后，您有失败的代码：


确保您安装了正确的软件包，
确保已将其直接包含在索引文件中，或者
将其导入到要创建库的项目和文件中
具体电话。


如果您知道实现第三方库集成以做出反应的其他方法或在本文中发现错误，请随时编辑此答案或添加其他答案。

此答案中的示例假定执行环境是浏览器，因此使用 window。如果您正在构建Shell脚本或使用react-native，则为 global等。

关于reactjs - 如何在 react 中使用/包含第三方库？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45658200/

24 4 0
文章推荐： reactjs - 如何使用expressJS提供ReactJS静态文件？
文章推荐： reactjs - React-Redux 中的无效 mapStateToProps 参数
文章推荐： reactjs - 用动态键 react setState
文章推荐： scala - 如何在Scala中将此map/flatMap转换为for comprehension？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com