如何让代码等待ReCaptcha呈现
如何让代码等待ReCaptcha呈现
提问于 2019-09-30 23:05:13
我正在尝试编辑由reCaptcha创建的元素的属性。但要做到这一点，我需要捕获正在创建的iframe。问题是，当我使用useEffect (而不是ComponentDidMount/Update。代码运行得太早了。如何让我的代码等待Captcha呈现？
import ReCAPTCHA from 'react-google-recaptcha';
...
const ReCaptcha = ({ isRtl = true, onSuccess }) => {
useEffect(() => {
let direction;
if (isRtl) {
direction = 'rtl';
} else {
direction = 'ltr';
}
//This doesn't exist yet.
const element = document.querySelector('iframe').contentDocument.getElementById('recaptcha-anchor-label');
console.log(element);
console.log(1);
if (element) {
element.setAttribute('dir', direction);
}
});
const handleChange = value => {
if (value) {
onSuccess();
}
};
console.log(2);
return (
<ReCAPTCHA
sitekey={'6LdfLysUAAAAAIVunEmrVZGErd_74d1r7deXdksg'}
onChange={handleChange}
/>
);
};显然，我可以像setTimeout一样添加，但这是一种可怕的做法。
我想编辑由ReCAPTCHA返回的label的属性。我正在使用这个包：https://www.npmjs.com/package/react-google-recaptcha
此组件呈现的内容如下所示：
<iframe>
<html>
<label id={'myLabel'} dir={'ltr'}>some label</label>
</html>
</iframe>我希望将#myLabel的dir属性更改为rtl (dir是我们的内部属性)。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-10-01 17:14:09
好的，我通过这样做解决了我的问题：
<ReCAPTCHA
hl={'ar'}
sitekey={ReCaptchaKeys.siteKey}
onChange={handleChange}
/>hl是一种语言代码。参考文献：
https://developers.google.com/recaptcha/docs/language
Setting reCAPTCHA Version 2 set another language other than English
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58170590
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号