使用 i18n (react) 翻译 json 中的表单标签

Question

我正在使用 i18n(v9) 翻译大型 React 项目中的大量文本。它在以下情况下按预期工作：

            <Intro
              title={details.title}
              subtitle={t('resume-upload subtitle')}
              description={t('resume-upload description 2')}
            />

但是，在使用这 2 个导入的表单组件中：

import { Form } from 'mobx-react-form';
import validatorjs from 'validatorjs';

当我尝试像这样翻译代码中的标签时：

  setup() {
    const { t } = this.props;
    return {
      fields: [
        {
          name: 'step',
          value: 0
        },
        {
          name: 'firstName',
          label: t('Firstname'),
          rules: 'required|string|between:2,25'
        },
        {
          name: 'lastName',
          label: t('Achternaam'),
          rules: 'required|string|between:2,25'
        },
        {
          name: 'emailaddress',
          label: t('Email'),
          rules: 'required|email|string'
        },
        {
          name: 'phonenumber',
          label: t('Telephone number'),
          rules: 'required|string|telephone'
        },
        {
          name: 'cv',
          label: t('resume')
        },
        {
          name: 'terms',
          label: 'Terms',
          value: false
        },
        {
          name: 'newFile',
          label: '',
          value: true
        },
        {
          name: 'noFile',
          label: '',
          value: false
        }
      ]
    };
  }
}
export default withNamespaces()(UploadForm);

t 函数在父文件中给出错误：

类型错误：form.values不是函数

有没有办法像我尝试的那样翻译 json 文件？

Answer 1

尝试实现您自己的 JSX 工厂。这将翻译传递给

React.createElement

的所有文本。 github 上有一个示例项目

webpack.config.js

const path = require(`path`);

module.exports = {
  webpack: {
    alias: {
      'react/jsx-runtime': path.resolve(__dirname, './src/jsx-runtime'),
      'react/jsx-dev-runtime': path.resolve(__dirname, './src/jsx-dev-runtime'),
    }
  },
};

jsx-runtime.js

const React = require('react');

const factory = (type, props) => {
    if (window.Translate) {
        const children = Array.isArray(props?.children) ? props?.children : [props?.children];
        return window.Translate.createElement(type, props, ...children);
    }
    return React.createElement(type, props);
};

module.exports = {
    Fragment: React.Fragment,
    jsx: factory,
    jsxs: factory,
};

jsx-dev-runtime.js

const React = require('react');

const factory = (type, props) => {
    if (window.Translate) {
        const children = Array.isArray(props?.children) ? props?.children : [props?.children];
        return window.Translate.createElement(type, props, ...children);
    }
    return React.createElement(type, props);
};

module.exports = {
    Fragment: React.Fragment,
    jsxDEV: factory,
};

索引.ts

import React from 'react';
import { createRoot } from "react-dom/client";

import { Translate } from 'react-declarative';

const locale = {
    // 'lorem ipsum': 'Hello world!',
};

const translate = new Translate(locale);

window.Translate = translate;

Object.assign(React, {
    createElement: translate.createElement,
});

const wrappedApp = (
  <span>
    lorem ipsum
  </span>
);

const container = document.getElementById("root")!;

const root = createRoot(container);

root.render(wrappedApp);