如何让代码等待 ReCaptcha 呈现答案

【问题标题】：How do I make code wait for ReCaptcha to render如何让代码等待 ReCaptcha 呈现
【发布时间】：2019-09-30 15:05:12
【问题描述】：

我正在尝试编辑由 reCaptcha 创建的元素的属性。但要这样做，我需要捕获正在创建的 iframe。问题是，当我使用useEffect（而不是ComponentDidMount/Update。代码运行得太早。如何让我的代码等待验证码呈现？

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 返回的标签属性。我正在使用这个包：https://www.npmjs.com/package/react-google-recaptcha

此组件呈现如下内容：

<iframe>
  <html>
    <label id={'myLabel'} dir={'ltr'}>some label</label>
  </html>
</iframe>

我想将#myLabel的dir属性更改为rtl（dir是我们的内部属性）。

【问题讨论】：

标签： javascript reactjs asynchronous recaptcha react-google-recaptcha

【解决方案1】：

好的，我通过以下方式解决了我的问题：

<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

【讨论】：