如何在React应用程序中根据网站上的语言动态制作meta标签？[反应头盔+ i18next]

npm install react-helmet i18next i18next-browser-languagedetector i18next-http-backend

import React from 'react';
import { Helmet } from 'react-helmet';
import i18next from 'i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18next
  .use(Backend)
  .use(LanguageDetector)
  .init({
    fallbackLng: 'en', // 默认语言
    debug: true, // 开启调试模式，可以在控制台看到详细的日志信息
    interpolation: {
      escapeValue: false, // React中不需要转义字符
    },
  });

const withLocalization = (WrappedComponent) => {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        loaded: false,
      };
    }

    componentDidMount() {
      i18next.loadLanguages(['en', 'zh-CN'], () => {
        this.setState({ loaded: true });
      });
    }

    render() {
      if (!this.state.loaded) {
        return null;
      }

      const language = i18next.language;

      return (
        <React.Fragment>
          <Helmet>
            <meta name="language" content={language} />
          </Helmet>
          <WrappedComponent {...this.props} />
        </React.Fragment>
      );
    }
  };
};

class MyComponent extends React.Component {
  render() {
    // 渲染组件的内容
  }
}

export default withLocalization(MyComponent);