我可以在 React 头盔标签中使用 react-i18next trans 标签吗？

Question

下面的代码

const x = (<Trans>Welcome</Trans>);
<helmet><title>{ `${x}` }</title></helmet>

不显示标题 = 欢迎。它显示标题 = object,object

因此，我想知道我可以在 react-helmet 标签内使用 react-i18next 标签吗？

Answer 1

您不能在 Helmet 中使用自定义 JSX 标签。它只支持所有有效的头标签：title, base, meta, link, script, noscript, and style tags 及其属性。但是，您可以使用 i18n 中的 t 函数进行翻译

// the hook
import { useTranslation } from 'react-i18next';

function MyComponent () {
  const { t, i18n } = useTranslation();
  return <helmet><title>{t('Welcome to React')}</title></helmet>
}

或像

这样的HOC

// the hoc
import { withTranslation } from 'react-i18next';

function MyComponent ({ t }) {
  return <helmet><title>{t('Welcome to React')}</title></helmet>
}

export default withTranslation()(MyComponent);

Documentation of react-18n provides more details

我可以在 React 头盔标签中使用 react-i18next trans 标签吗？

Can I use react-i18next trans tag inside React helmet tag?

javascript

reactjs

i18next

react-helmet