在前端开发中，一个好的第三方库能够提高工作效率，减少冗余代码的编写，同时还可以提高项目的可维护性。而今天我们要介绍的react-google-picker-2就是这样一个优秀的npm包工具。
什么是react-google-picker-2
react-google-picker-2是一个基于React的Google Drive文件和文件夹选择器。它可以帮助开发人员快速实现来自Google Drive的文件选择器。它不仅可以选择文件和文件夹，还可以使用Google Picker API来获取Google Drive上面的所有文件和文件夹，还可以支持多种文件类型的上传，使得我们的前端开发变得更加高效和简单。
安装和使用
安装
要安装react-google-picker-2，您需要在终端或命令行窗口中使用以下命令：
npm install react-google-picker-2 --save
导入
安装完成后，您需要导入文件：
import { GooglePicker } from 'react-google-picker-2';配置
在使用GooglePicker之前，您需要在Google Cloud Console中启用Google Picker API，并获得Client ID：
- 查看您的项目，如果没有就创建一个新的。
- 确保Google Picker API可用-您可能需要手动启用它。
- 创建新OAuth客户端ID——将应用程序类型设置为Web应用程序。
- 将来自新创建的OAuth应用程序客户端ID的Client ID添加到您的客户端代码中。
const googleAuth = {
client_id: 'YOUR_CLIENT_ID',
scope: [
'https://www.googleapis.com/auth/drive.readonly'
],
locale: 'en',
features: ['MULTISELECT_ENABLED']
};选择器类型
let googleViewId = 'DOCS';
const googleUploadButton = (
<div onClick={() => this.onUploadClick()}>
<Button>
Upload to Google Drive
</Button>
</div>
);在上述配置中，googleViewId代表文件选择器类型，这里默认显示Google Docs的文件类型，这里您还可以使用Google Drive支持的所有文件类型进行选择。
使用示例
-- -------------------- ---- -------
-------------
-------------------------------
---------------------
------------------------------ ---
-------------- -- ---------- - -
---------------------- ---- ------ -- ------
----
- - -
-----------------------------------
-
-
---------------- -- -------------------------- ----------
-----------
---------
---------------------
---------------------
-------------- -------- ----------- -- -
---- - --- --------------------------------------
---- - ----------------------------
-------------------------------
--------------------------------------
------ -------------
--
-
--------------------
---------------在这个示例中，我们使用了Google Picker API获取了Google Drive上的文件和文件夹，并将结果通过回调函数传回给父组件。需要注意的是，我们使用了Google Picker API来构建并返回了我们的文件选择器。
总结
通过上述介绍，我们可以发现react-google-picker-2有如下几个优点：
- 快速实现Google Drive文件和文件夹选择器
- 支持多种文件及类型的上传
- 可以使用Google Picker API来获取Google Drive上的所有文件和文件夹
- 增加项目的可维护性
- 减少工作量
因此，学习和使用react-google-picker-2不仅可以帮助我们在前端开发中更高效地工作，同时也能提高我们的技术水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600555f681e8991b448d2fbe