如何用React I18Next翻译formik errormessage

Question

我有以下组件：

import { Formik, Form, useField, ErrorMessage } from "formik";
import * as Yup from "yup";
import Select from "react-select";

const iceCreamOptions = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" }
];

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

const initialValues = {
  icecream: null
};

const validationSchema = Yup.object().shape({
  icecream: Yup.object()
    .shape({
      value: Yup.string(),
      label: Yup.string()
    })
    .required("Please select a value")
    .nullable()
});

export default function App() {
  return (
    <Formik
      initialValues={initialValues}
      onSubmit={(values) => console.log(values)}
      validationSchema={validationSchema}
    >
      {(props) => {
        return (
          <Form>
            <FormSelect name="icecream" options={iceCreamOptions} />
          </Form>
        );
      }}
    </Formik>
  );
}

现在，我想在我的应用程序中添加一个板，因此我将使用React I18Next。 基本示例就是这样：

const { t } = useTranslation();

<p>{t('message')}</p>

现在，如何将这些翻译与我的错误组件一起使用？ 我确定，我不能这样做：D

t(<ErrorMessage name={name} />)

因此，如果无法使用t和errormessage来处理它，我认为我需要做以下操作：

{meta.touched && meta.error ? (
  <div className="error">{t(meta.error)}</div>
) : null}

Answer 1

您可以像这样使用yup.typeerror（）。

    const validationSchema = Yup.object().shape({
  icecream: Yup.object()
    .shape({
      value: Yup.string(),
      label: Yup.string()
    }).TypeError(' Your msg translated here')
    .required("Please select a value")
    .nullable()
});

Answer 2

我认为您可以直接翻译verionationschema这样。

const validationSchema = (t) => Yup.object().shape({
  icecream: Yup.object()
    .shape({
      value: Yup.string(),
      label: Yup.string()
    })
    .required(t("RequiredValueTranslation"))
    .nullable()
});

并使用它

const [t] = useTranslation()
const schema = () => validationSchema(t)

Answer 3

另一种方法是从for formik中使用函数，但是以相同的方式，您必须将yup消息更改为翻译钥匙。

errormessage-render

const validationSchema = Yup.object().shape({
  icecream: Yup.object()
    .shape({
      value: Yup.string(),
      label: Yup.string()
    })
    .required("requiredTranslationKey")
    .nullable()
});

然后，在组件主体中

<ErrorMessage name={name} render={key => t(key)} />