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，则最内部将设置上下文。规则翻译必须嵌套在提供者中。

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

<LoginForm i18n={i18n} />

或者在选项中传递：

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

或全局设置一次：

translate.setI18n(i18n);

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