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

【问题标题】：React-google-recaptcha does not appear in the modal when the component is rendered呈现组件时，React-google-recaptcha 不会出现在模态中
【发布时间】：2022-11-26 13:30:32
【问题描述】：

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

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

【问题讨论】：

标签： javascript reactjs react-google-recaptcha

【解决方案1】：

我遇到了同样的问题。我发现这个松弛的帖子帮助... https://stackoverflow.com/a/39507430/14953153

这是一个代码 sn-p 我希望它有所帮助。请注意，我有一个 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>

)

}

【讨论】：