Gatsby语言本地化(一键更改语言)

Question

我有这个代码，它可以使用两个单独的按钮(锚标签)在英语和德语之间进行语言切换。问题是，我只能使用一个按钮来启用这个开关，但我就是不能理解它。

下面是"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

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

提前感谢您的回复。:)

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

Answer 1

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

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