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

Question

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

感谢您的任何提示

CodeSandbox 问题示例

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

Answer 1

您只需返回模式中翻译消息的键即可。并且在你的渲染方法中，你只能翻译那个键......

我的解决方案：

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}
/>