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;

在子组件中翻译字符串的正确方法是什么？如果我想渲染＆＃34;页面未找到＆＃34;或者＆＃34; Pagina non trovata＆＃34;根据使用的语言，我的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 or hoc，而是在级别页面上的组件上使用。从那里取决于组件嵌套传递通过道具或再次使用渲染道具或特殊。

哪种方式通过＆＃34; t＆＃34;使用react-i18next的子组件？

1 个答案: