Traduction de chaque composant pour reac-i18next

Question

Im utilisant reac-i18next. La chose est qu'il s'attend à ce que le <I18nextProvider> soit emballé sur l'extérieur de mon application. Je ne peux pas l'envelopper dans mon composant lui-même, car cela déclenchera des erreurs.

Est-il même possible d'exécuter plusieurs instances de ce fournisseur? Depuis j'ai environ 12 composants réutilisables que je veux offrir avec un support multilingue. Comment dois-je gérer cela puisque je veux gérer les traductions, si possible, dans ces composants lui-même.

La chose que j'ai en ce moment est de me donner des erreurs que les options ne sont pas définies. Je suppose que cela arrive parce que je veux traduire au niveau du composant externe où le composant est rendu à l'intérieur. Un composant wrapper intermédiaire pourrait faire ici cependant.

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

Si vous utilisez i18nextProvider, le plus interne définira le contexte. La règle translate hoc doit être imbriquée dans le fournisseur.

Alternative: ne pas utiliser le i18nextProvider. Vous pouvez également passer i18next par exemple que des accessoires pour le traduire hoc:

<LoginForm i18n={i18n} />

ou passer dans les options:

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

ou définir une fois à l'échelle mondiale:

translate.setI18n(i18n);

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