0

我正在尝试编辑由 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>

并且我想改变to的属性dir（dir是我们的内部属性）。#myLabelrtl

4

1 回答 1

0

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

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

hl是语言代码。参考：

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

设置 reCAPTCHA 版本 2 设置英语以外的其他语言

于 2019-10-01T09:14:08.933 回答