如何让代码等待 ReCaptcha 呈现

How do I make code wait for ReCaptcha to render

我正在尝试编辑由 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是我们的内部属性）。

好的，我解决了我的问题：

<ReCAPTCHA
  hl={'ar'}
  sitekey={ReCaptchaKeys.siteKey}
  onChange={handleChange}
/>

hl是语言代码。参考文献：

https://developers.google.com/recaptcha/docs/language