Question

我正在创建一个React应用，我想使用react-localize-redux进行翻译，并使用yup进行验证。我的问题是在了解如何结合它们。

我知道我可以将字符串传递给yup-require或一个函数，因为这是签名：

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

当我只是传递一个字符串时，这种方法非常有效，但是我不知道如何在导入

之后传递我的react-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

让我给出一些建议，在我的情况下，我不使用package进行本地化或翻译，而是使用Yup本身的setLocale函数。我也希望这项工作对您也有用。首先，我为此类字典消息创建文件javascript。

src / validators / 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 / validators / 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)
                }}
              > 
    .
    .

我已经尝试过这种方法，希望对您来说这是一个类似的解决方案。

使用react-localize-redux-translations作为yup-required-string

1 个答案: