可以使用next-i18next翻译“aria-标签”。

Question

我有一个应用程序，支持多种语言，我想翻译易用性道具，如“咏叹调标签”。在我的例子中，我使用的是Next.js和next-i18next。我专门为这些翻译创建了一个名称空间(a11y)

<IconButton
  aria-label={t('a11y:TogglePassVisibility')}
  onClick={handleClickShowPassword}
  edge="end">
    {showPassword ? <Visibility /> : <VisibilityOff />}
</IconButton>

该组件使用来自next-i18next的自定义，类似于：

export default withTranslation(['common', 'auth', 'a11y'])(SignUp);

但我得到了这样的信息:警告:螺旋桨aria-label不匹配。服务器：“切换密码可见性”客户端："TogglePassVisibility“。如果我检查DOM，我可以看到它正在工作，但是警告仍然存在。不确定框架是否支持它。我做了我的研究，但到目前为止还没有运气。

Answer 1

Aria是一个常规的DOM属性，您可以翻译它。

由于Next.js是服务器&客户端呈现器，因此从您的错误看，您的服务器端呈现与客户端不同。

造成这种情况的原因有很多，其中之一是服务器端的语言与客户端的语言不同。