0

我正在创建一个 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')
          })}
...
/>
4

1 回答 1

1

让我给出一些建议，在我的情况下，我不使用包进行本地化或翻译，但我使用来自 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)
                }}
              > 
    .
    .

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

于 2019-09-25T08:45:37.970 回答