reactjs 呈现组件时,React-google-recaptcha不会出现在模态中

jjhzyzn0  于 2022-11-29  发布在  React
关注(0)|答案(1)|浏览(114)

我在引导程序模态中使用react-google-ReCAPTCHA。第一次关闭模态时它是可见的,再次重新打开模态时它是不可见的

<ReCAPTCHA
       sitekey={process.env.REACT_APP_EMAIL_RECAPTCHA_SITE_KEY}
       className="g-recaptcha-response"
       name="g-recaptcha-response"
    />
qmelpv7a

qmelpv7a1#

我也遇到了同样的问题。我发现这个松弛的帖子帮助了... https://stackoverflow.com/a/39507430/14953153
这是一个代码片段,我希望它能有所帮助。注意,我有一个try-catch,所以在第一次渲染时,它会尝试但失败,因为已经有一个ReCaptcha元素,但任何其他的重新渲染,它都会渲染一个新的ReCaptcha元素。

export const MyComponent = () => {

const modalOnShow = () => {
    try {
        window.grecaptcha.render('form-recaptcha', {
            sitekey: "[site-key]",
            callback: function(resp){}
        });
    } catch (error) {
        console.log(error)
    }
}

return (
    <Modal onEntered={modalOnShow}>
        <ReCAPTCHA 
            id="form-recaptcha"
            sitekey="[site-key]"
        />
    </Modal>

)

}

相关问题