呈現組件時，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>

)

}