如何在状态更改时强制重新加载react-recaptcha（语言更新）

Question

当我获得新的 current_lang 时，我想在状态更改时重新加载 reCaptcha 小部件。

我使用了componentDidUpdate

componentDidUpdate() {
  if (this.recaptchaInstance) {
    this.recaptchaInstance.reset();
  }
}

看起来它重新渲染了组件，但语言保持不变？

这是我的组件

<Recaptcha
  ref={e => (this.recaptchaInstance = e)}
  sitekey="using_it_just_didnt_copy_it_here"
  size="normal"
  render="explicit"
  hl={language.current_lang}
  onloadCallback={this.onloadRecaptcha}
/>

有人可以指出我正确的方向吗？谢谢！

Answer 1

也许您需要重新安装Recaptcha而不仅仅是重新渲染它。您应该使用keyprop 强制重新安装：

constructor() {
  super();
  this.key = 0;
}

componentDidUpdate() {
  if (this.recaptchaInstance) {
    this.key++; 
  }
}

<Recaptcha
  key={this.key}
  ref={e => (this.recaptchaInstance = e)}
  sitekey="using_it_just_didnt_copy_it_here"
  size="normal"
  render="explicit"
  hl={language.current_lang}
  onloadCallback={this.onloadRecaptcha}
/>