很明显，网站需要国际化。但是，创建同一网站的多个版本并不是最佳解决方案。使用React，我们可以完全全球化我们的应用程序。我将向您展示如何做到这一点。
该应用程序包括：
翻译引擎
它什么都不做，只会得到一个单词，并根据所选语言返回翻译后的单词。您需要将selected language和一个单词传递给此组件。Translate组件的子代只能是string。我在下面使用了Redux，但是您可以使用本地状态或Context API来设置语言。
import React, { PureComponent } from "react"
import { connect } from "react-redux"
// The function which returns you translated words based on a language.
import Dictionary from "./dictionary"
class Translate extends PureComponent {
translateWord(word) {
try {
const { lang } = this.props
// lang = "es"
const languageDb = Dictionary(lang)
if (word in languageDb.words) {
return languageDb.words[word]
}
return word
} catch (err) {
console.error('Error while translating::translateWord', err)
// If something goes wrong return the word as it is.
return word
}
}
render() {
let { children, lang } = this.props
if (typeof children === "string" && lang !== "en") {
// pass the lowerCased word to get in the translated form.
return this.translateWord(children.toLowerCase())
}
return <>{children}</>
}
}
const mapStateToProps = (state) => {
return {
lang: state.lang,
}
}
export default connect(mapStateToProps, null)(Translate)
字典
这可以是一个object/function返回基于语言的所有可用翻译词的列表的。您将必须提供一个JSON对象（如下所示），该对象列出了所有已翻译的单词。
import es from "./es.json"
import ru from "./ru.json"
import de from "./de.json"
const languages = {
es,
ru,
de,
}
export default function(lang) {
return languages[lang]
}
这就是我的西班牙语DB（es.json）的样子：
{
"lang":"es",
"words" : {
"search" : "registrar",
"conversation" : "conversación"
}
}
您可以如下所示使用翻译组件，但请记住，其子组件只能是string。
<Translate>Hello</Translate>