[英]React modules and wrapping Google Recaptcha
I am trying to figure out how to use <script>
loading in an existing React app that uses React modules. 我试图弄清楚如何在使用React模块的现有React应用程序中使用
<script>
加载。
All external libraries in my app are loaded with a module loader , eg : 我的应用程序中的所有外部库都装有模块加载器,例如:
import Module from /path/to/module;
My task is to incorporate google recaptcha which in all examples that I have seen uses 我的任务是将google recaptcha合并到我见过的所有示例中
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
method to load api.js script file. 加载api.js脚本文件的方法。 Is there a way to wrap loading into a module?
有没有办法将加载包装到模块中?
thanks, forgive me if the question is dumb, total React noob here. 谢谢,请原谅我,如果这个问题很愚蠢,请在这里说一下。
UPDATE: 更新:
I can't use npm , its disabled in my world. 我不能使用npm,在我的世界中已禁用它。 But I may be able to leverage this bit from the package.
但我也许可以利用软件包中的这一点。
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"],
});
` `
This is probably what you are looking for : 这可能是您要寻找的:
react-google-recaptcha
npm package react-google-recaptcha
npm软件包
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.