如何将 react-intl 与 yup 和 react-hook-forms 一起使用？

Question

我正在尝试使用 react-intl 来创建本地化的验证模式，是的。但是，我所能找到的只是与 i18n 的集成。我已经在使用 react-intl 作为我的主要本地化工具；因此，我想继续使用这个工具。是否可以使用 react-intl 为 yup 创建一个有效的本地化？我正在单独的文件中创建验证模式，仅供参考。

感谢任何提示

CodeSandbox Example of the issue

TLDR：我需要使用本地化验证消息。反应国际。目前我不确定如何传递本地化 ID 并将其翻译到渲染组件中。

Answer 1

您只 return 模式中翻译消息的键。在你的渲染方法中，你只能翻译那个键......

我的解决方案：

export const schema = yup
  .object({
    simpleInput: yup.string().required("form.required.message")
  })
  .required();

像这样创建实用程序：

function getTranslate(key) {
  return intl.formatMessage(key);
}

最后一件事，对于 TextField 我们只使用：

<TextField
   {...field}
   error={!!error}
   helperText={error ? getTranslate(error) : null}
/>

如何将 react-intl 与 yup 和 react-hook-forms 一起使用？

How to use react-intl with yup and react-hook-forms?

reactjs

yup

react-intl