文章/答案/技术大牛

发布

社区首页 >问答首页 >如何根据由react-helmet动态改变的html语言使用大写

问如何根据由react-helmet动态改变的html语言使用大写
EN

Stack Overflow用户

提问于 2019-07-10 23:03:06

回答 1查看 221关注 0票数 0

在我的应用程序中，我通过单击按钮来更改语言。现在，我想根据该语言的大写规则更改一些单词并使其大写。我试图通过动态更改<html/> lang属性来做到这一点。我的语言选项是土耳其语和英语

要更改html标记，我使用react-helmet；要翻译单词，我使用react-i18next。它似乎适用于某些代码，但对于某些单词，大写规则适用于以前的语言。

<Helmet htmlAttributes={{lang: currentlySelectedLanguage}} />

function getHeader(){
   return[
     { id: headerOne, label: t("kit")}
   ]

}

T是一个来自react-i18n的转换器函数。此函数检查currentlySelectedLanguage的转换json文件，并将其值作为标签写入。

标头项的css类中有text-transform:uppercase。

在土耳其语中，有两种字母: I -> ->和ıİI。

当我选择english时，会发生这种情况，但我得到的不是KIT，而是KİT。这是土耳其语的大写规则，而不是英语。

当我选择turkish时，我得到的是KIT，但它应该是KİT，这也是英文的大写规则

react-helmet

reactjs

typescript

react-i18next

回答 1

Stack Overflow用户

发布于 2019-09-14 04:33:59

我也遇到过类似的问题。使用当前语言设置React Helmet的htmlAttributes (如您的语句所示)，

<Helmet htmlAttributes={{ lang: currentlySelectedLanguage }} />

不影响DOM中的元素(按钮、标题、...等)其中有text-transform: uppercase; CSS声明。

我通过在触发的set language操作开始时立即设置document.documentElement.lang解决了这个问题：

    setLanguage(currentlySelectedLanguage) {
        if (document.documentElement) {
            document.documentElement.lang = currentlySelectedLanguage
        }

        // do other stuff ...
    }

以这种方式设置<html lang="??">来解决这个问题并不会阻止我使用React Helmet，但我会继续使用React Helmet管理对文档头的所有更改。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56973591

复制

相似问题

问如何根据由react-helmet动态改变的html语言使用大写
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何根据由react-helmet动态改变的html语言使用大写EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何根据由react-helmet动态改变的html语言使用大写
EN