Reactjs 盖茨比语言本地化（使用一个按钮更改语言）

我有这段代码，它可以使用两个单独的按钮和锚标记在英语和德语之间切换语言。 问题是我只能用一个按钮来启动这个开关，但我就是不能把我的头绕在它周围

以下是language.js组件：

import { IntlContextConsumer, changeLocale } from "gatsby-plugin-intl"

const languageName = {
  en: "English",
  de: "Deutsch",
}

const Language = () => {
  return (
    <div>
      <IntlContextConsumer>
        {({ languages, language: currentLocale }) =>
          languages.map(language => (
            <a
              key={language}
              onClick={() => changeLocale(language)}
              style={{
                color: currentLocale === language ? `yellow` : `white`,
                margin: 10,
                textDecoration: `underline`,
                cursor: `pointer`,
              }}
            >
              {languageName[language]}
            </a>
          ))
        }
      </IntlContextConsumer>
    </div>
  )
}

export default Language

如果您需要任何其他组件，请让我知道

提前感谢您的回复：

附言。

---

本地化是在没有i18实现的情况下完成的。

下面的简单示例在只使用两种语言（如代码段中的语言）时应该会产生预期的结果。如果将语言添加到配置中，则它将始终显示除当前语言环境之外的所有语言

import React from "react"
import { IntlContextConsumer, changeLocale } from "gatsby-plugin-intl"

const languageName = {
  en: "EN",
  de: "DE",
}

const LanguageToggle = () => {
  return (
    <div>
      <IntlContextConsumer>
        {({ languages, language: currentLocale }) =>
          languages.map(language => {
            if (language != currentLocale) {
              return (
                <a key={language} onClick={() => changeLocale(language)}>
                  {languageName[language]}
                </a>
              )
            }
          })
        }
      </IntlContextConsumer>
    </div>
  )
}

export default LanguageToggle

---

你想创建一个语言选择器吗？一个简单可行的例子会很有帮助，同时也能说明你想要达到的目标。不，不是语言选择者。主要思想是：1默认语言为英语2有一个按钮，上面有DE文本3单击时，网站应翻译为德语，按钮的文本应更改为英语。下面的演示使用三个按钮锚定标记进行操作：来源：问题是我只需要一个按钮来处理英语-德语的翻译，而不需要韩语。在这种情况下，是什么阻止您使用文本依赖于其他可用区域设置的单个按钮？