ReactJS：如何在扩展组件中注入组件并传递变量而不是使用函数

Question

我正在使用 apollo 对我的 nextJS 应用程序进行身份验证。现在我需要添加 i18n 支持，我面临一些基本问题：

主要是处理class Index extends React.Component的问题，我的page and the components looks like vs. the function version used in the example.

也是这样

文档中有一个如何在应用程序页面旁边实现 i18 的示例：

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)

Answer 1

玩nextJS获取初始道具的方式并初始化initialI18nStore商店。我们需要将 initialI18nStore 和 t 提取逻辑放在您的 getInitialProps 中。初始化一个新的 i18nProps 对象并在满足条件时填充它，然后 return 您的登录用户以及 i18nProps 使用扩展运算符。

完成后，您需要拥有类似于文档示例的语言映射 .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 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": "साइन आउट"
}

ReactJS：如何在扩展组件中注入组件并传递变量而不是使用函数

ReactJS: How to inject component and pass variable in extended component instead using function

javascript

reactjs

nextjs