Question

我是React的新手，我正在尝试在我的应用程序中添加i18n。我不知道/我知道这是我的愚蠢之举，但我找不到解决问题的方法/。我有两个简单的问题，如果您能给我答案，我将非常高兴。

我正在尝试在菜单组件中添加资源，但是它给我“解析错误：意外的令牌”。能否请我告诉我如何添加有关i18n的const。

    <!DOCTYPE html>
<html>
    <body>
        <iframe id="win" src="bookmarks_3_22_20.html" frameborder="0">
        </iframe>
        <script>
            this.onload=function(){
                document.getElementById("win").style="width:"+window.innerWidth+"px;height:"+window.innerHeight+"px;";
            }
        </script>
</body>
</html>

我的第二个问题是如何在标题标签中添加国际化库，因为我的结构是在html组件中。

我知道那些问题很愚蠢，但是我自学成才，找不到简单的答案。

在此先感谢您，我保证以后不再为此类问题而烦恼

Answer 1

没有愚蠢的问题，没有后顾之忧。

请尝试以下代码：

import React from "react";
import { Link } from "react-router-dom";
import { useTranslation } from 'react-i18next';

import "./navbar.scss";

const Navbar = () => {
  const { t, i18n } = useTranslation();

  return (
    <span>{t('b.label')}</span>
    <span>{t('sm.label')}</span>
    <span>{t('aboutmenu.label')}</span>
    <span>{t('contactmenu.label')}</span>
  );
}

在大多数情况下，如果您是从create-react-app开始项目的，则无需在head标签（位于public/index.html中）中添加库。要配置react-i18next库，请阅读react-i18next guide。

这似乎是一个不错的youtube guide，应该教会您更多有关react和i18n-react的知识。祝好运！：）

ReactJS i18n库实现问题

1 个答案: