React 模块和包装 Google Recaptcha

Question

我正在尝试弄清楚如何在使用 React 模块的现有 React 应用程序中使用 <script> 加载。

我的应用程序中的所有外部库都加载了模块加载器，例如：

import Module from /path/to/module;

我的任务是合并 google recaptcha，在我见过的所有示例中都使用

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

加载api.js脚本文件的方法。有没有办法将加载包装到模块中？

谢谢，如果问题很愚蠢，请原谅我，这里是 React 新手。

更新：

我不能使用 npm ，它在我的世界中被禁用。但我也许可以利用软件包中的这一点。

import ReCAPTCHA from "./recaptcha";
import makeAsyncScriptLoader from "react-async-script";

const callbackName = "onloadcallback";
const lang = typeof window !== "undefined" && (window.recaptchaOptions && window.recaptchaOptions.lang) ?
  `&hl=${window.recaptchaOptions.lang}` :
    "";
const URL = `https://www.google.com/recaptcha/api.js?onload=${callbackName}&render=explicit${lang}`;
const globalName = "grecaptcha";

export default makeAsyncScriptLoader(ReCAPTCHA, URL, {
  callbackName,
  globalName,
  exposeFuncs: ["getValue", "getWidgetId", "reset", "execute"],
});

`

Answer 1

这可能是您要查找的内容：

react-google-recaptcha npm package