reactjs - 使用 react-i18next 将“t”传递给子组件的正确方法是什么？

Question

我的应用看起来像这样

import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import { I18n } from 'react-i18next';
import Home from '../Home/Home'
import Products from '../Products/Products'
import Navbar from '../Navbar/Navbar'
import NotFound from '../NotFound/NotFound'

class App extends Component {
  render() {
    return (
      <I18n ns="translations">
      {
        (t, { i18n }) => (
          <Router>
            <div>
              <Navbar />
              <div>{t('home.meta')}</div>
              <Switch>
                <Route path='/' exact component={Home} />
                <Route path='/products' component={Products} />
                <Route component={NotFound} />
              </Switch>
            </div>
          </Router>
        )
      }
      </I18n>
    );
  }
}

export default App;

在子组件中也有翻译字符串的正确方法是什么？如果我想根据使用的语言呈现“Page not found”或“Pagina non trovata”，我的 NotFound 组件是

import React from 'react'
import { Message, Icon } from 'semantic-ui-react'
import styles from './styles.css'

const NotFound = () => (
  <Message negative size='massive' className={styles.errormsg}>
    <Message.Header>
      <h1>404</h1>
      <p>Page Not Found</p>
    </Message.Header>
    <Icon name='frown' size='massive' className={styles.iconCenter} />
  </Message>
)

export default NotFound

我必须做什么才能使用

<p>{t('pagenotfound')}</p>

Answer 1

我建议不要在您的应用程序组件上而是在关卡页面上的组件上开始使用 render prop 或 hoc。从那里取决于组件嵌套传递 t 通过道具或再次使用渲染道具或 hoc。