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 noob总是在这里。

更新：

我不能在我的世界中使用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

React模块和包装Google Recaptcha

1 个答案: