2

我正在使用 apollo 对我的 nextJS 应用程序进行身份验证。现在我需要添加 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)
4

1 回答 1

1

nextJS与获取初始道具并初始化initialI18nStore商店的方式一起玩。我们需要在你initialI18nStore的. 初始化一个新对象并在满足条件时填充它，然后使用扩展运算符返回您的登录用户。tgetInitialPropsi18nPropsi18nProps

完成后，您需要拥有.json与文档示例类似的语言映射文件。以您想要翻译的所有语言创建一个index.json。例如：en/index.json包含英语映射，hi/index.json包含印地语映射等。

注意：您需要i18n.js像文档示例一样导入组件。这是模块所在的地方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英语

{
  "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印地语

{
  "hello": "नमस्ते",
  "name": "नाम"
  "signOut": "साइन आउट"
}
于 2017-11-28T03:09:21.507 回答