react i18n 怎么编写{t("SignIn.emailSent")}的值才能实现输出 Email was sent to {emailInfo} at {dateTime} dateTime是变量

在 React i18n 中，可以使用占位符来处理这类动态文本。你可以这样编写：

t("SignIn.emailSent", { emailInfo: "example@example.com", dateTime: new Date().toLocaleString() })

在这里，`{emailInfo}` 和 `{dateTime}` 是占位符，React i18n 会将它们替换为传递给 `t` 函数的第二个参数中的值。你可以将 `emailInfo` 和 `dateTime` 替换为你需要的变量和值。

相关问题

react 配置i18n如何需要配置index.html

React中配置i18n通常需要在index.html文件中加入一些语言相关的标签和脚本。主要包括以下几步：

1. 在index.html中加入语言相关的meta标签，例如：

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Language" content="en" />

其中，"Content-Language"属性可以设置当前页面的语言，这里设置为英语。

2. 加载i18n相关的脚本，例如：

<script src="//cdn.jsdelivr.net/i18next/1.7.3/i18next.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.i18n/1.1.0/jquery.i18n.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.i18n/1.1.0/jquery.i18n.messagestore.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.i18n/1.1.0/jquery.i18n.fallbacks.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.i18n/1.1.0/jquery.i18n.parser.min.js"></script>

这里使用了i18next和jquery.i18n两个库，可以根据需要选择其他的i18n库。

3. 在React组件中使用i18n进行语言切换，例如：

import i18n from 'i18next';

i18n.init({
  lng: 'en',
  resources: {
    en: {
      translation: {
        'Hello': 'Hello',
        'World': 'World'
      }
    },
    zh: {
      translation: {
        'Hello': '你好',
        'World': '世界'
      }
    }
  }
});

class App extends React.Component {
  render() {
    return (
      <div>
        <div>{i18n.t('Hello')}</div>
        <div>{i18n.t('World')}</div>
      </div>
    );
  }
}

这里通过i18n库初始化语言资源，并在组件中使用i18n.t方法来获取对应语言的文本。

react 配置i18n如何更改index.html与index.tsx

要配置i18n并更改index.html和index.tsx，你需要采取以下步骤：

1. 安装依赖：在项目中安装i18n相关的依赖，例如`i18next`和`react-i18next`。

2. 配置i18n：在项目中创建一个i18n配置文件，例如`i18n.js`或`i18n.ts`。在这个文件中，你可以设置本地化的语言、翻译文件的路径等等。

3. 更改index.html：在index.html文件中，你可以添加一个语言选择器，让用户可以选择他们想要的语言。这个语言选择器可以是一个下拉菜单或者是一个链接列表。

4. 更改index.tsx：在index.tsx文件中，你需要将i18n配置文件导入并初始化i18n。然后，你可以使用i18n来翻译你的应用程序中的文本。

5. 在应用程序中使用i18n：在你的应用程序中，你可以使用`useTranslation` hook来获得当前语言的翻译。你可以把这个翻译应用于文本、标题、按钮等等。

总之，配置i18n需要在多个地方进行修改和配置，包括i18n配置文件、index.html文件和index.tsx文件。