Как мне динамически изменить язык Google Recaptcha с помощью React - PullRequest
Новая
       13

Как мне динамически изменить язык Google Recaptcha с помощью React

0 голосов
/ 17 апреля 2019

Я использую реагировать-google-recaptcha .

Я хочу динамически изменять элемент recaptcha всякий раз, когда я загружаю этот компонент.

Требования: 1. Пришлось брать новые реквизиты и менять язык 2. При размонтировании и перемонтировании компонент также должен отобразить новый язык

  • очистил глобальные значения для Google recaptcha при отключении.
  • Принудительное повторное включение при смене реквизита
  • Сочетание этих двух

window.recaptchaOptions = { removeOnUnmount: true } неправильно удаляет рекапчу.

Ожидается: recaptcha перемонтирует и изменит свой язык на выбранный язык.

Факт: Recaptcha будет перемонтирован на том же языке.

1 Ответ

0 голосов
/ 17 апреля 2019

Решение:

  1. При монтировании динамически импортировать реагировать-google-recaptcha

  2. при удалении удалить window.grecaptcha & window.recaptchaOptions

  3. при обновлении объедините шаги 1 и 2 

export default class ReCaptchaValidation extends React.Component<Props> {
  static defaultProps = {
    handleChange: null,
    lang: 'en'
  }

  state = {
    Recaptcha: null
  }

  componentDidMount (): void {
    this.importRecaptcha()
  }

  importRecaptcha = async () => {
    const { lang } = this.props
    this.setState({ Recaptcha: null })
    delete window.recaptchaOptions
    delete window.grecaptcha
    window.recaptchaOptions = {
      lang,
      useRecaptchaNet: false,
      removeOnUnmount: false
    }
    const { default: Recaptcha } = await import('react-google-recaptcha')
    this.setState({ Recaptcha })
  }

  componentWillUnmount () {
    delete window.recaptchaOptions
    delete window.grecaptcha
  }

  componentDidUpdate (prevProps: Readonly<P>): void {
    if (prevProps.lang !== this.props.lang) {
      this.importRecaptcha()
    }
  }

  render () {
    const { apiKey, className, handleChange, lang } = this.props
    const { Recaptcha } = this.state

    return (
      <div>
        {Recaptcha && (
          <Recaptcha
            sitekey={apiKey}
            size={'normal'}
            onChange={handleChange}
          />
        )}
      </div>
    )
  }
}
...