介绍
react-recaptcha-that-works 是一款基于 React 的 Google reCAPTCHA v2 插件。除了提供正常的 API 外，该插件还可以完全自定义 reCAPTCHA 组件，使其更符合你的需求。该插件状态管理采用 React Hooks，同时还使用了 Redux 存储。
安装
使用 npm 安装该包。
--- - --------------------------
使用
该插件需要在 Google reCAPTCHA 网站上注册 API。首先打开下方链接，注册并获取您的 API Key。
https://www.google.com/recaptcha/admin/site/XXXXXXXXXXXXX
在您的 React 应用中，添加该插件并在组件中引用。
------ --------- ---- -----------------------------
----- --- ------- --------------- -
-------- -
------ -
-----
----------
----------- ------ --------- ---- --- ----
--
------
--
-
-在您的表单中，添加一个用于提交表单的按钮。
------ --------- ---- -----------------------------
----- --- ------- --------------- -
----- - -
----------- -----
--
-------------- - -------- -- -
-- ---------- -
---------------
----------- ----
---
-
--
---------- - - -- -
-------------------
-- ----------------------- -
----------------------
- ---- -
----------------- --------- -----
-
--
-------- -
------ -
-----
----- ---------------------------
----------
----------- ------ --------- ---- --- ----
------------------------------
--
------- ---------------------------
-------
------
--
-
-自定义样式
该插件支持完全自定义 reCAPTCHA 组件的样式，而不仅仅是隐藏默认的 Google reCAPTCHA 图片和文本。为了达到这个目的，唯一需要完成的任务是在页面头部引用 recaptcha.css，然后在组件中添加一个包含自定义样式的 style 标签。
在您的 React 应用中，导入 recaptcha.css。
------ -------------------------------------------
为了添加自定义 CSS 样式，需要在组件中添加一个包含样式的 style 标签。
------ --------- ---- -----------------------------
----- --- ------- --------------- -
-------- -
------ -
-----
----------
----------- ------ --------- ---- --- ----
--------
------ --------
------- -- ------
---------------- ----------
------------- ------
---------- ---- --- --- ------- -- -- ------
------- ---------
--
--
------
--
-
-Redux 存储
该插件使用 Redux 存储来存储插件状态。当 reCAPTCHA 验证完成后，状态将存储在 Redux 存储中，并将对应于您的 react-recaptcha-that-works 组件。
您可以使用以下 Redux 存储选择器获取 reCAPTCHA 状态：
------ - ----------- - ---- -------------- ----- ---------- - ----------------- -- ----------------------------
结论
react-recaptcha-that-works 是一款非常优秀的 React 插件，提供了完全自定义 reCAPTCHA 组件的功能，同时还包含了 Redux 存储，并提供了自定义样式选项。此外，它还提供了非常详细的使用教程，可以非常容易地添加到您的应用中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006735b890c4f7277583f20