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

Question

以下代码

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

不显示标题=欢迎。它显示title = object，object

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

Answer 1

您不能在头盔中使用自定义JSX标签。它仅支持所有有效的head标签：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