在 I18nextProvider 中使用 t 函数？可能吗？

Question

有没有办法在 I18nextProvider 中使用 t 函数？

翻译工作在子组件中。我想将可翻译的元素传递给 SEO 组件。

现在我得到 Uncaught ReferenceError: t is not defined 错误。

这个例子更清楚地说明了我想要实现的目标：

**index.js**

import SEO from './components/villages/neighborhoods/SEO';
import { I18nextProvider, withTranslation } from 'react-i18next';
import i18n from './i18n';
import {createBrowserHistory} from 'history';
const customHistory = createBrowserHistory();

class App extends React.Component {
  
  render() {       

    var lang = i18n.language;    

    return (      
      <I18nextProvider i18n={i18n}>
        <div>               
          <SEO
            schema={t("Product")}
            title={t("metatile")}
            lang={i18n.language}
            path={`/${lang}`}
          />   
          <Router history={customHistory}>
            <Switch>
              <Route exact path={`/:lng(en|lt)?`} component={LandingPage} />
              <Route path={`/:lng(en|lt)?/test`} component={LandingPage}/>
              <Route component={NoMatch} />
            </Switch>
          </Router>
          <ModalContainer />
        </div>
      </I18nextProvider>
    )
  }
}


ReactDOM.render(<App />, document.getElementById('app'));

是否有一种简单的方法来传递可翻译的 title 和 schema 变量而不覆盖整个 index.js 代码？

已更新SEO.js

import React from 'react';
import PropTypes from 'prop-types';
import { Helmet } from 'react-helmet';

import { useTranslation } from 'react-i18next';
const { t } = useTranslation();

const SEO = ({
  schema, lang, title, description, keywords, base, path, contentType
}) => (
    <Helmet
      htmlAttributes={{
        lang: lang,
        itemscope: undefined,
        itemtype: `http://schema.org/${schema}`,
      }}
      title={t("title")}
      link={[
        { rel: 'canonical', href: base + path },
      ]}
      meta={[
        { name: 'description', content: description },
        { name: 'og:title', content: `${title}` },
        { name: 'og:type', content: contentType },
        { name: 'og:description', content: description },
      ]}
    />

  );
  

SEO.propTypes = {
  schema: PropTypes.string,
  lang: PropTypes.string,
  title: PropTypes.string,
  description: PropTypes.string,
  keywords: PropTypes.string,
  path: PropTypes.string,
  contentType: PropTypes.string,
};


export default SEO;

Answer 1

在 App 组件中，您可以将 SEO 的 schema 和 title 属性更改为：

<SEO
  schema="Product"
  title="metatile"
  lang={lang}
  path={`/${lang}`}
/>

然后在你的 SEO 组件中你可以使用 t 通过使用 useTranslation 挂钩或使用 withTranslation HOC（两者都由 react-i18next):

通过使用 useTranslation Hook：

import React from 'react';
import { useTranslation } from 'react-i18next';

function SEO(props) {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t(props.title)}</h1>
      <p>{t(props.schema)}</p>
    </div>
  );
}

export default SEO;

通过使用 withTranslation HOC:

import React from 'react';
import { withTranslation } from 'react-i18next';

function SEO(props) {
  return (
    <div>
      <h1>{props.t(props.title)}</h1>
      <p>{props.t(props.schema)}</p>
    </div>
  );
}

export default withTranslation()(SEO);

在 I18nextProvider 中使用 t 函数？可能吗？

Use a t function inside of a I18nextProvider? Is it possible?

reactjs

i18next

react-i18next

通过使用 useTranslation Hook：

通过使用 withTranslation HOC: