外部ライブラリを使用せずにReactで言語を変更する方法を提案できますか？私の方法は、三項演算子を使用すること{language === 'en'? 'title': 'titre'}です。言語がの場合はen表示しtitle、そうでない場合は表示しますtitre。他にどのような方法をお勧めできますか。たとえば、翻訳は別のjsonファイルに配置する必要があります。
ここのコード：https：//stackblitz.com/edit/react-eu9myn
class App extends Component {
constructor() {
super();
this.state = {
language: 'en'
};
}
changeLanguage = () => {
this.setState({
language: 'fr'
})
}
render() {
const {language} = this.state;
return (
<div>
<p>
{language === 'en' ? 'title' : 'titre'}
</p>
<button onClick={this.changeLanguage}>change language</button>
</div>
);
}
}
国際化（i18n）は、世界中の言語の癖の幅を説明するために、専門の翻訳者や言語学者によって設計されたいくつかの既存の標準ソリューションでは難しい問題です。すべての対象言語に堪能であっても、通常は独自の解決策を考え出そうとすべきではありません。
これは、ライブラリが必要であることを意味するわけではありませんが（これらの標準のいずれかを自分で実装できます）、i18nロジックをインラインで作成しても拡張性がなく、おそらくうまく機能しません。
i18nの最も簡単なケースは、コンテキストに依存せず、補間のない完全な文である文字列を翻訳する場合です。大きな翻訳辞書を使用して、その中の各文字列を検索するなど、非常に基本的なアプローチで済ますことができます。それはあなたの三項のように見えますが、少なくともそれは多くの言語に対応するでしょう、そしてそれをライブラリなしで行うのは合理的でしょう：
l10n = {
'title': {en: 'title', fr: 'titre'}
}
<p>
{l10n['title'][lang]}
</p>
ただし、Webサイト/アプリケーションなどで文字列補間が行われる場合は、ICUなどを実装するライブラリを検討してください。
それでは、なぜそれが悪い考えになるのかをお見せしましょう。（n）を実際の数に置き換えたい文字列「（n）岩が見える」があり、文を文法的に正しくしたいので、数の一致を計算する必要があるとしましょう。つまり、「0 rocks」、「1 rock」、「2+ rocks」…英語の複数形は「s」を追加しているように見えます（真実ではありませんが、今のところ仮定しましょう）。これは3値で実装できます。あなたの例ではフランス語を使っていると思いますが、それはどうですか？「0カイユー」、「1カイユー」、「2+カイユー」。そうです、フランス語には複数形があります。それを説明するためにどのようにコードを書きますか？また、ドイツ語の翻訳が必要な場合はどうなりますか？多分、翻訳者は、オブジェクトが文の最後ではなく最初に行くべきであると決定するでしょう。
これらの問題はすべて、ICU文字列にエンコードする翻訳者に委任する必要があります。翻訳者は、正しい翻訳を取得するために、コンテキストが与えられたコードによって評価されます。ライブラリを使用する場合でも、自分で実装する場合でも、最終的に必要なのは関数localize(string, context)です。Reactからほとんど独立しており、次のようにコンポーネントで使用する関数と呼びましょう。
import localize from './somewhere'
<p>
{localize('title')}
</p>
本当に必要な場合は、ロケールを引数として渡して、何らかの方法でReactの状態に格納することができます。このライブラリは、実際のユーザーが言語を切り替えることはめったになく、その場合はアプリケーション全体をリロードしても問題ないため、必要ないと判断しました。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加