針對每個組件進行反應的翻譯-i18next

Im正在使用react-i18next。事情是，它期望<I18nextProvider>在我的應用程序的外部包裝。我無法將其包裹在我的組件內，因爲這會引發錯誤。針對每個組件進行反應的翻譯-i18next

它甚至可以運行該提供程序的多個實例嗎？由於我有大約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;

來源

2017-09-07 Dirkos

如果使用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

來源

2017-09-07 18:31:45 jamuhl

非常好，謝謝！我還有一個關於翻譯組件的問題。您應該如何處理每個組件的翻譯，以便所有這些組件可以通過默認翻譯發貨。總的來說，應用程序的實現應該能夠覆蓋課程本身的翻譯本身 – Dirkos

默認翻譯你的意思是隻提供文本的後備語言或每種語言？對於後備，您可以使用：defaultValue in t options：https://www.i18next.com/essentials.html#overview-options 對於多種語言，我建議使用https://www.i18next.com/essentials .html＃multiple-fallback-keys，你可以通過https://www.i18next.com/api.html#addresourcebundle添加你的「默認」翻譯 – jamuhl

不，我瞭解後備，但我有10個組件。我想用法語/德語/英語發貨。所有這些都翻譯得很好，而且效果很好。但現在我正在爲一個應用程序中的客戶實施它們，並且我的客戶需要特定的其他翻譯。如果可能的話如何處理？ – Dirkos

針對每個組件進行反應的翻譯-i18next

回答

相關問題