如何在nextjs应用程序中实现动态多语言Recaptcha v2？

Question

我正在将next.js与next-i18next一起使用来处理页面上的翻译。

我正在将react-google-recaptcha用于Google Recaptcha，但如果使用起来更简单，则可以不使用该软件包。

当用户想要更改语言时，我们会在下拉菜单中选择语言，并调用props.i18n.changeLanguage(newLanguage)来更新语言。

示例代码。问题是，即使语言发生了变化，recaptcha也不会改变。

import React from 'react';
import PropTypes from 'prop-types';
import ReCAPTCHA from 'react-google-recaptcha';

export default class RecaptchaWrapper extends React.Component {
  static propTypes = {
    language: PropTypes.string.isRequired
  };

  render() {
    const { language } = this.props;
    if (!language) {
      return null;
    }

    return <ReCAPTCHA hl={language} sitekey="secret" onChange={() => {}} />;
  }
}