react

2024-05-25 01:23| 来源: 网络整理| 查看: 265

react-intl 使用

If you’re creating a web application that requires translation into multiple different languages, it can be difficult to implement this manually. That’s why many use internationalization (i18n) libraries, which make adding translations as simple as adding another string.

如果创建的Web应用程序需要翻译成多种不同的语言，则可能很难手动实现。这就是为什么许多人使用国际化(i18n)库的原因，该库使添加翻译就像添加另一个字符串一样简单。

React-Intl, part of the FormatJS set of libraries, is a nice library for doing just that. Written by the folks over at Yahoo, it provides several React components that allow for translating strings, formatting dates, numbers, and more.

React-Intl是FormatJS库集的一部分，是一个很好的库。它是由Yahoo的人们编写的，提供了几个React组件，这些组件可以翻译字符串，格式化日期，数字等。

安装 (Installation)

To start us off, we’ll create a new project using Create React App and add the react-intl package.

首先，我们将使用Create React App创建一个新项目，并添加react-intl包。

$ yarn create react-app i18n $ cd i18n $ yarn add react-intl 添加翻译 (Adding Translations)

First, we’ll open up src/App.js and add an object containing the phrases we’ll use and their translations:

首先，我们将打开src/App.js并添加一个对象，其中包含我们将使用的短语及其翻译：

src/App.js src / App.js import React from "react"; const messages = { en: { greeting: "Hello {name}! How are you?", time: "The time is {t, time, short}.", date: "The date is {d, date}." }, es: { greeting: "¡Hola {name}! ¿Cómo estás?", time: "La hora es {t, time, short}.", date: "La fecha es {d, date}." }, fr: { greeting: "Bonjour {name}! Comment ça va?", time: "Il est {t, time, short}.", date: "La date est {d, date}." }, de: { greeting: "Hallo {name}! Wie geht's?", time: "Es ist {t, time, short} Uhr.", date: "Das Datum ist {d, date}." } };

The arguments enclosed in curly braces ({ and }) allow you to input data and define how it will be formatted. For more information, see the documentation on message syntax.

用大括号( {和} )括起来的参数允许您输入数据并定义其格式。有关更多信息，请参见有关消息语法的文档。

编写我们的组件 (Writing our Component)

Now that we have our translations written, we have to use them in our App component.

现在我们已经编写了翻译，我们必须在我们的App组件中使用它们。

src/App.js src / App.js import React, { useState } from "react"; import { IntlProvider, FormattedMessage } from "react-intl"; const messages = { // -- snip -- }; function App() { const [name, setName] = useState(""); const handleChange = e => { setName(e.target.value); }; const locale = "en"; return (

{ t: Date.now() }} /> { name }} /> { d: Date.now() }} />

); } export default App;

That’s it!

而已！

结语 (Wrapping Up)

That was just a simple example of how to use react-intl. It’s a very powerful library, and I definitely recommend checking out their documentation.

那只是如何使用react-intl的简单示例。这是一个非常强大的库，我绝对建议您查阅他们的文档。

You can check out the complete code for this post on CodeSandbox.

您可以在CodeSandbox上查看此帖子的完整代码。

翻译自: https://www.digitalocean.com/community/tutorials/react-i18n-react-intl

react-intl 使用

【本文地址】

公司简介

联系我们