1

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

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

示例：我的密码字段具有此验证模式：

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

命名空间是 yup，消息是“password-min”：“密码必须至少包含 ${min} 个字符”

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

有没有办法在不显示警告信息的情况下做到这一点？

谢谢

4

2 回答 2

3

如果你想在 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
于 2020-05-27T11:25:30.647 回答
1

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

于 2019-03-20T16:47:39.180 回答