如何通过React i18next实现Formik ErrorMessage多语言翻译

官方推荐最优方案：利用 ErrorMessage 组件的 render props 能力 #

ErrorMessage 本身支持传入函数作为子元素（render prop 模式），组件内部已经自动处理了「字段已触碰、存在错误才渲染」的逻辑，你只需要在渲染函数里拿到原始错误文本，调用 t 方法翻译即可，完全不需要自己手动判断字段状态。
对应你的 FormSelect 组件修改后代码如下：

import { useTranslation } from "react-i18next";

const FormSelect = ({ name, options }) => {
  const [field, meta, helpers] = useField(name);
  const { t } = useTranslation();
  return (
    <>
      <Select
        name={name}
        value={field.value}
        onChange={(value) => helpers.setValue(value)}
        options={options}
        onBlur={() => helpers.setTouched(true)}
      />
      <ErrorMessage name={name}>
        {(errorText) => <div className="error">{t(errorText)}</div>}
      </ErrorMessage>
    </>
  );
};

这个方案的优势是完全复用 Formik 内置的错误显示逻辑，不会和 Formik 的配置（比如提交后才显示错误、自定义触碰判断规则等）冲突，维护成本最低。

关于你提到的手动判断字段状态的写法 #

你写的手动判断 meta.touched && meta.error 再渲染翻译内容的写法功能上完全可用，逻辑没有问题，但本质是重复实现了 ErrorMessage 组件已经内置的判断逻辑。如果后续项目里调整了 Formik 的错误显示规则，你需要逐个修改所有手写判断的位置，不如直接用内置的 render prop 方案省心。

实践优化建议 #

• Yup 校验规则里的错误信息不要直接写自然语言，统一使用 i18n 键值，比如把原来的 .required("Please select a value") 改成 .required("form.error.required_select")，对应在语言包里配置不同语言的文案即可，避免翻译匹配出错。
• 如果项目表单字段多，可以抽离一个通用的翻译错误组件，避免重复写逻辑：

const FormError = ({ name }) => {
  const { t } = useTranslation();
  return (
    <ErrorMessage name={name}>
      {(msg) => <div className="form-error-text">{t(msg)}</div>}
    </ErrorMessage>
  );
};

后续在所有表单项里直接引入<FormError name="对应字段名" />即可。

内容的提问来源于stack exchange，提问作者A curious student