Использование response-localize-redux-translations в качестве yup-required-string

Question

Я создаю приложение React и хочу использовать response-localize-redux для перевода и yup для проверки. Моя проблема в том, чтобы понять, как их объединить.

Я знаю, что могу передать строки в yup-require или функцию, так как это подпись:

mixed.required(message?: string | function): Schema

Это прекрасно работает, когда я просто передаю строку, но я не понимаю, как я могу передать перевод моего response-localize-redux после импорта

import { Translate } from 'react-localize-redux';

модуль, в котором я привык к таким компонентам JSX, как

<Translate id="you-can-login-now" />

который возвращает мою переведенную строку тогда. Я понятия не имею..

Мой код:

import { Translate } from 'react-localize-redux';
import * as Yup from 'yup';
<Formik
          initialValues={this.state.data}
          validationSchema={Yup.object().shape({
            name: Yup.string().required('required')
          })}
...
/>

Answer 1

Позвольте дать вам совет, в моем случае я не использую пакет для локализации или перевода, а использую функцию setLocale от самого Yup. Надеюсь, это сработает и для вас. Сначала я создаю файл javascript для такого словарного сообщения.

SRC / валидаторы /setLocaleID.js

    exports.mixed = {
      default: '${path} tidak valid',
      required: 'Bidang ${path} harus diisi',
      oneOf: '${path} harus mengandung salah satu dari nilai berikut: ${values}',
      notOneOf: '${path} tidak dapat mengandung nilai-nilai berikut: ${values}'
    };
    module.exports = exports

а затем я создаю схему проверки

SRC / валидаторы /addUser.js

    import * as Yup from 'yup'
    import localeID from './setLocaleID.js'

    Yup.setLocale(localeID)

    export default Yup.object().shape({
      name: Yup.string()
        .required()
    })

наконец, я импортирую его, на мой взгляд, такой компонент.

src / views/AdminForm.jsx

import AddUserSchema from 'validators/addUser'

    .
    .
    .
    <Formik
                enableReinitialize={true}
                initialValues={userData}
                validationSchema={AddUserSchema}
                onSubmit={(values, { setSubmitting }) => {
                  this.handleSaveUser(values)
                  setSubmitting(false)
                }}
              > 
    .
    .

Я уже пробовал этот способ и надеюсь, что для вас это аналогичное решение.