ReactJS: Wie man die Komponente injiziert und die Variable in der erweiterten Komponente übergibt, statt mit der Funktion

Question

Ich benutze Apollo für die Authentifizierung meiner nextJS-Anwendung. Jetzt brauche ich i18n Unterstützung hinzufügen und ich einige grundlegende Probleme gegenüber:

Vor allem das Problem class Index extends React.Component zu handhaben ist, das ist, wie meine page und die Komponenten wie gegen die Funktion Version im example verwendet aussieht.

In der Dokumentation ist dieses Beispiel gibt, wie man eine Seite der Anwendung implementieren i18next:

import React from 'react'; 
import Link from 'next/link'; 
import { translate } from 'react-i18next'; 
import i18n from '../i18n'; 

function Index({ t, initialI18nStore }) { 
    return (
    <div> 
     {t('welcome')} 
     <p>{t('common:integrates_react-i18next')}</p> 
     <Link href="/page2"><a>{t('link.gotoPage2')}</a></Link> 
    </div> 
); 
} 

const Extended = translate(['home', 'common'], { i18n, wait: process.browser })(Index); 

// Passing down initial translations 
// use req.i18n instance on serverside to avoid overlapping requests set the language wrong 
Extended.getInitialProps = async ({ req }) => { 
    if (req && !process.browser) return i18n.getInitialProps(req, ['home', 'common']); 
    return {}; 
}; 

export default Extended; 

Aber meine Seite verwendet class Index extends React.Component. So kann ich nicht t und initialI18nStore in meine Komponente implementieren. Auch verstehe ich nicht, wie die getInitialProps hinzufügen in meine bestehenden:

Seite

import React from 'react' 
import cookie from 'cookie' 
import { withApollo, compose } from 'react-apollo' 

import withData from '../lib/withData' 
import redirect from '../lib/redirect' 
import checkLoggedIn from '../lib/checkLoggedIn' 

class Index extends React.Component { 
    static async getInitialProps (context, apolloClient) { 
    const { loggedInUser } = await checkLoggedIn(context, apolloClient) 

    if (!loggedInUser.user) { 
     // If not signed in, send them somewhere more useful 
     redirect(context, '/signin') 
    } 

    return { loggedInUser } 
    } 

    render() { 
    return (
     <div> 
     Hello {this.props.loggedInUser.user.name}!<br /> 
     <button onClick={this.signout}>Sign out</button> 
     </div> 
    ) 
    } 
}; 

export default compose(
    withData, 
    withApollo 
)(Index) 

Answer 1

Um die ersten Stütze des Erhaltens und initialisieren initialI18nStore Speicher zusammen mit nextJS Art und Weise zu spielen. Wir müssen die initialI18nStore und t Abruflogik in Ihrem getInitialProps platzieren. Initialisieren Sie ein neues i18nProps-Objekt, und füllen Sie es, wenn die Bedingung erfüllt ist, dann geben Sie Ihren angemeldeten Benutzer zusammen mit der i18nProps mit dem Spread-Operator zurück.

Sobald dies erledigt ist, müssen Sie die Sprachenzuordnung .json Dateien ähnlich wie das Dokumentationsbeispiel haben. Erstellen Sie eine index.json in allen Sprachen Sie die Übersetzungen möchte. ZB: en/index.json enthält Englisch-Mapping, hi/index.json enthält Hindi-Mapping usw.

HINWEIS: Sie müssen i18n.js in Ihrer Komponente importieren, wie die Dokumentation Beispiel tat. Dies ist, wo das Modul https://github.com/i18next/react-i18next/blob/master/example/nextjs/i18n.js

Index.js

class Index extends React.Component { 
    static async getInitialProps (context, apolloClient) { 
    let i18nProps = {} 

    if (context.req && !process.browser) {   
     i18nProps = i18n.getInitialProps(context.req, ['index']); 
    } 

    const { loggedInUser } = await checkLoggedIn(context, apolloClient) 

    if (!loggedInUser.user) { 
     redirect(context, '/signin') 
    } 

    return { loggedInUser, ...i18nProps } 
    } 

    render() { 
    // Ternary conditional just to ensure the availability of initialI18nStore object in props. 
    return (
     this.props.initialI18nStore 
     ? 
     <div> 
      {this.props.t('hello') + this.props.loggedInUser.user.name} !<br /> 
      <button onClick={this.signout}{this.props.t('signOut')}</button> 
     </div> 
     : 
     <div> 
      Hello {this.props.loggedInUser.user.name}!<br /> 
      <button onClick={this.signout}>Sign out</button> 
     </div> 
    ) 
    } 
}; 

const ExtendedIndex = translate(['index'], { i18n, wait: process.browser })(Index) 

export default compose(
    withData, 
    withApollo 
)(ExtendedIndex) 

en/index.json for English

{ 
    "hello": "Hello", 
    // Instead of name, your json should have the names of your users 
    // if you intend on internationalising names as well 
    "name": "Name" 
    "signOut": "Sign Out" 
} 

hi/index.json for Hindi

{ 
    "hello": "नमस्ते", 
    "name": "नाम" 
    "signOut": "साइन आउट" 
}