반응 -i18next에 대한 각 구성 요소의 번역

Question

Im 반응 -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를 사용하는 경우 가장 안쪽에서 컨텍스트가 설정됩니다. 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