是的和国际化

Question

我有一个 React 示例应用程序，其中包含一个用 Formik 制作的表单和一个用 Yup 制作的 validationSchema，但我需要为每种支持的语言更改消息。所以我使用 react-i18next 进行国际化，效果很好。我的 "formik-messages".

有一个通用命名空间和一个特定命名空间

我有一个问题，当我在我的特定语言消息中使用 ${min} 插值时，Chrome 控制台向我显示警告，即使一切正常。

示例：我的密码字段有这个 validationSchema:

密码：Yup.string().min(8, t("yup:password-min")).required(t("yup:password-required"))

命名空间是，消息是 "password-min" : "Password must contain at least ${min} characters"

消息显示没有问题，但 Chrome 控制台显示警告（意外的模板字符串表达式 no-template-curly-in-string），因为该插值。

有没有办法在不显示警告消息的情况下执行此操作？

谢谢

Answer 1

已解决，只需使用模板文字而不是双引号

Answer 2

如果您想在 React 应用程序的变量而不是组件中使用 i18n，我们可以使用 'i18next' 而不是使用 'react-i18next'

中的 useTranslation 钩子

import * as yup from 'yup'
import i18n from 'i18next'

const MyValidationSchema = yup.object().shape({
  name: yup.string().when('$name', {
  is: true,
  then: yup
    .string()
    .required(i18n.t('name.validation.nameRequired'))
  otherwise: yup.string().notRequired(),
  }),
})

export default MyValidationSchema

是的和国际化

Yup and internationalization

i18next

reactjs

yup

formik