react-i18next 的每个组件的翻译

Question

我正在使用 react-i18next。事情是它希望 <I18nextProvider> 成为我的应用程序外部的包装器。我不能将它包装在我的组件本身中，因为这会触发错误。

甚至可以运行该提供程序的多个实例吗？因为我有大约 12 个可重用的组件，我想提供多语言支持。如果可能的话，我应该如何处理这些组件本身的翻译。

我现在遇到的错误是选项未设置。我想这是因为我想在组件内部渲染的外部组件级别上进行翻译。不过，中间包装组件可以在这里做。

import React from 'react';
import { connect } from 'react-redux';
import { Form, Button, Input } from '@my/react-ui-elements';
import { authenticateUser } from '../../actions/index';
import { translate } from 'react-i18next';
import { I18nextProvider } from 'react-i18next';
import i18n from '../../i18n';

const styles = {
  wrapper: {
    padding: '30px 20px',
    background: '#fff',
    borderRadius: '3px',
    border: '1px solid #e5e5e5'
  },
  subTitle: {
    opacity: 0.3
  }
};

@connect(store => {
  return {
    config: store.config.components.Authentication,
    loading: store.authentication.loginform_loading,
    errorMessage: store.authentication.loginform_errorMessage,
    forgotpasswordEnabled: store.config.components.Authentication.forgotpassword_enabled
  };
})

@translate(['common'], { wait: false })

class LoginForm extends React.Component {

  constructor() {
    super();
    this.state = {
      username: null,
      password: null
    };
    this.handleForm = this.handleForm.bind(this);
  }

  handleForm(e) {
    e.preventDefault();
    this.props.dispatch(authenticateUser(this.state.username, this.state.password));
  }

  render() {
    const { t } = this.props;

    // Forgot password
    var forgotPassword = null;
    if(this.props.forgotpasswordEnabled) {
      forgotPassword = <Form.Field>
        <Button as='a' href={this.props.config.forgotpassword_path} secondary fluid>Forgot password</Button>
      </Form.Field>;
    }
    // Full element
    return (
      <I18nextProvider i18n={ i18n }>
        <Form style={styles.wrapper} onSubmit={this.handleForm}>
          <h3>{t('Login')}</h3>
          <p>{this.props.errorMessage}</p>
          <Form.Field>
            <Input onChange={e => this.setState({username: e.target.value})} label='Username'/>
          </Form.Field>
          <Form.Field>
            <Input onChange={e => this.setState({password: e.target.value})} type='password' label='Password'/>
          </Form.Field>
          <Form.Field>
            <Button loading={this.props.loading} disabled={this.props.loading} type='submit' primary fluid>Login</Button>
          </Form.Field>
          {forgotPassword}
        </Form>
      </I18nextProvider>
    );
  }
}

export default LoginForm;

Answer 1

如果使用 i18nextProvider 最内层将设置上下文。规则翻译 hoc 必须嵌套在提供程序中。

替代方案：不使用 i18nextProvider。您还可以将 i18next 实例作为 props 传递给 translate hoc：

<LoginForm i18n={i18n} />

或在选项中传递它：

@translate(['common'], { wait: false, i18n: i18n })

或全局设置一次：

translate.setI18n(i18n);

https://react.i18next.com/components/translate-hoc.html