Как заставить код ждать ReCaptcha для рендеринга - PullRequest
Новая
       12

Как заставить код ждать ReCaptcha для рендеринга

0 голосов
/ 30 сентября 2019

Я пытаюсь отредактировать атрибут элемента, созданного 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

Этот компонент отображает что-то вродеthis: 

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

И я хочу изменить атрибут dir #myLabel на rtl (dir - наш внутренний атрибут).

1 Ответ

0 голосов
/ 01 октября 2019

Хорошо, я решил свою проблему, выполнив: 

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

hl - код языка. Список литературы:

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

Настройка reCAPTCHA версии 2 для установки другого языка, кроме английского

...