Question

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

要更改html标记，请使用react-helmet并翻译使用react-i18next的单词。似乎对某些代码有效，但对于某些单词，大写规则取决于以前的语言。

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

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

}

t是react-i18n中的翻译器功能。该函数检查currentSelectedLanguage的转换json文件，并将其值写为标签。

页眉项目的css类中有text-transform:uppercase。

在土耳其语中，有两种类型的字母：i->İ和ı-> I。

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

当我选择turkish时发生，但随后我得到KIT，但是应该是KİT，这也是英语的大写规则

Answer 1

我有类似的问题。将React Helmet的htmlAttributes设置为当前lang（如您的陈述所示）

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

不会影响DOM中具有text-transform: uppercase; CSS声明的元素（按钮，标题等）。

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

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

        // do other stuff ...
    }

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

如何根据React头盔动态更改的html lang使用大写字母

1 个答案: