反応i18nextのための各成分の翻訳

Question

私は反応i18nextを使用しています。それは<I18nextProvider>が私のAppの外にラッパーであると予想しているということです。それがエラーを引き起こすので、コンポーネント自体の内部にラップすることはできません。

そのプロバイダの複数のインスタンスを実行することは可能ですか？私は約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を使用している場合、最も内側がコンテキストを設定します。 Rule translate hocはプロバイダ内でネストする必要があります。

代替：i18nextProviderを使用しないでください。また、翻訳アドホックに小道具としてi18nextインスタンスを渡すことができます。

<LoginForm i18n={i18n} />

またはオプションでそれを渡します

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

または一度グローバルに設定します。

translate.setI18n(i18n);

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