在前端开发中，使用 Google Sheet 作为数据源是非常常见的。但是要将 Google Sheet 中的数据显示在网页中，需要写很多的代码。这时，npm 包 @lourd/react-google-sheet 就可以帮我们轻松实现数据展示的功能。
本文将介绍如何使用 @lourd/react-google-sheet 包来展示 Google Sheet 中的数据，并提供详细的指导和示例代码。
安装 @lourd/react-google-sheet
首先，需要安装 @lourd/react-google-sheet 包。可以使用 npm 或 yarn 来完成安装。
npm install @lourd/react-google-sheet yarn add @lourd/react-google-sheet
创建 Google Sheet
在展示数据之前，我们需要创建一个 Google Sheet。
打开 Google Sheets。
创建一个新的 Sheet。
在 Sheet 中填写数据。
将 Sheet 公开。
点击 “共享” 按钮，将 Sheet 公开。
复制 Sheet ID。
Sheet ID 在 URL 中，可以从浏览器地址栏中找到。
https://docs.google.com/spreadsheets/d/{Sheet ID}/edit#gid=0
使用 @lourd/react-google-sheet
在安装了 @lourd/react-google-sheet 包和创建了一个 Google Sheet 之后，我们就可以开始展示数据了。
-- -------------------- ---- -------
------ ----------- ---- ----------------------------
-------- ----- -
------ -
------------
-------------------------
----------------------------
----------------------------------
-------------
-------------------------
------------------- ------ ----- ------- -------
--
--
-
------ ------- ----id: 必填，你的 Google Sheet ID。apiKey: 必填，你的 Google API Key，需要开启 Google Sheets API 权限。className: 可选，自定义样式表名称。header: 可选，是否显示表头，默认为 true。defaultCountryCode: 可选，用于解析电话号码的国家代码，默认为 “US”。errorMessage: 可选，自定义错误消息。
示例代码
以下代码将显示一个 ID 为 “your_sheet_id_here” 的 Google Sheet 中名为 “Sheet1” 的数据。在这个例子中，我们需要将 YOUR_API_KEY_HERE 替换为自己的 Google API Key。
-- -------------------- ---- -------
------ ----------- ---- ----------------------------
-------- ----- -
----- ------ - --------------------
----- ------- - ---------------------
------ -
---- ----------------
------- -----------------------
--- ---------------------------- ----- ---------
---------
------------
------------
---------------
-----------------------------
-------------
-------------------------
------------------- ----- --- -- ---------
--
------
--
-
------ ------- ----结论
@lourd/react-google-sheet 包可以帮助我们轻松地在网页中展示 Google Sheet 中的数据。只需要几行代码就可以完成数据展示的功能。
本文介绍了如何安装 @lourd/react-google-sheet 包，并提供了示例代码和详细的指导。希望这篇文章能对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc7967216659e244535