问题

I'm trying to use the react-google-recaptcha library and required to use the enterprise mode. In the documentation, it is possible to use the enterprise mode by setting the global properties, but I'm confused on how to set the global properties using window.recaptchaOptions in react. Where should I put it and how to actually set the enterprise key into true ?

我正在尝试使用react-google-recaptcha库，并需要使用企业模式。在文档中，可以通过设置全局属性来使用企业模式，但我不确定如何在React中使用window.recaptchaOptions来设置全局属性。我应该把它放在哪里，如何将enterprise键实际设置为true？

I did some research and I found that to access the window object, you actually need to use the componentDidMount or useEffect , but it doesn't seem to work properly. When the enterprise mode is turned on, the script tag should load a javascript file from https://www.google.com/recaptcha/enterprise.js and not https://www.google.com/recaptcha/api.js

我做了一些研究，发现要访问window对象，实际上需要使用componentDidMount或useEffect，但似乎不起作用。当启用企业模式时，脚本标签应该从https://www.google.com/recaptcha/enterprise.js加载JavaScript文件，而不是https://www.google.com/recaptcha/api.js。

https://codesandbox.io/s/charming-mendel-kp3wdt?file=/src/App.js

// _app.tsx

declare global {
  interface Window { recaptchaOptions: any; }
}

useEffect(() => {
    window.recaptchaOptions = {
        enterprise: true
    }
}, [])

https://codesandbox.io/s/charming-mendel-kp3wdt?file=/src/App.js

//_app.tsx

declare global {
  interface Window { recaptchaOptions: any; }
}

useEffect(() => {
    window.recaptchaOptions = {
        enterprise: true
    }
}, [])

答案1

得分: 0

Found the solution, just need to add the condition of (typeof window !== undefined) inside the useEffect:

//_app.tsx

declare global {
  interface Window { recaptchaOptions: any; }
}

useEffect(() => {
    if (typeof window !== undefined)
        window.recaptchaOptions = {
            enterprise: true
        }
}, [])

//_app.tsx

declare global {
  interface Window { recaptchaOptions: any; }
}

useEffect(() => {
    if (typeof window !== undefined)
        window.recaptchaOptions = {
            enterprise: true
        }
}, [])