javascript - ReactJS:関数を使用する代わりに、拡張コンポーネントにコンポーネントを注入して変数を渡す方法

Question

nextJS アプリケーションの認証に apollo を使用しています。ここで、i18n サポートを追加する必要があり、いくつかの基本的な問題に直面しています。

主な問題は、私のページclass Index extends React.Componentとコンポーネントがどのように見えるか、例で使用されている関数のバージョンとどのように見えるかを処理することです。

ドキュメントには、アプリケーションのページに 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;

しかし、私のページはclass Index extends React.Component. tしたがって、initialI18nStoreコンポーネントに実装する方法がわかりません。getInitialPropsまた、既存のものにを追加する方法がわかりません:

ページ

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)