reactjs - RSuite 错误消息使用 rsuite Schema 进行翻译。NextJS i18n

Question

我在 RSuite 和架构错误处理方面遇到了一点问题。现在我无法翻译来自 Schema 的错误消息，因为 Schema 是在组件外部编写的，所以我不能使用钩子。是否可以在组件外部翻译错误消息？

    const { StringType, DateType } = Schema.Types;
const model = Schema.Model({
    username: StringType().isRequired('FORM.ERR.REQUIRED'),
    password: StringType().isRequired('FORM.ERR.REQUIRED')
});

export default function login() {
    const [formValue, setFormValue] = useState();
    const { t } = useTranslation()
    const form = useRef();

const formSubmit = () => {
    if (form.current.check()) {
        console.log(formValue);
    }
}

return (
    <section className="LOGIN">
        <div className="LOGIN__container">
            <Form
            className="LOGIN__container-form"
                model={model}
                onChange={formValue => setFormValue(formValue)}
                onSubmit={() => formSubmit()}
                ref={form}>
                <FormGroup>
                    <FormGroup>
                        <FormControl placeholder="Username" name="username" style={{width: '100%'}} />
                    </FormGroup>
                    <FormGroup>
                        <FormControl placeholder="Password" name="password" type="password" style={{width: '100%'}} />
                    </FormGroup>
                </FormGroup>
                <ButtonToolbar>
                    <Button appearance="primary" type="submit">
                        {t('COMMON.SUBMIT')}
                    </Button>
                </ButtonToolbar>

            </Form>
        </div>
    </section>
)

这就是整个组件

Answer 1

当然可以，但不能使用钩子，例如，我使用 React-intl。

import { FormattedMessage } from 'react-intl';

export const formatMessage = (id: string, values: BaseObject = {}): any => {
  return <FormattedMessage id={id} values={values} />;
};

你可以使用这个函数返回一个 React.ReactNode.like this

const model = Schema.Model({
    username: StringType().isRequired(formatMessage('FORM.ERR.REQUIRED')),
    password: StringType().isRequired(formatMessage('FORM.ERR.REQUIRED'))
});