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

Question

我在引导模式中使用 react-google-ReCAPTCHA。 当我关闭模态并再次重新打开模态时它第一次可见它不可见

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

Answer 1

我遇到了同样的问题。 我发现这个松弛的帖子帮助... 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>

)

}