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脚本文件的方法。 有没有办法将加载包装到模块中？

谢谢，请原谅我，如果这个问题很愚蠢，请在这里说一下。

更新：

我不能使用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软件包