如何在带有MDXJS的MDX/Markdown文件中使用I18Next/Reaction-I18Next？ [英] How to use i18next / react-i18next inside MDX / Markdown files with MDXJS?

问题描述

我们使用MDXJS包来编写Markdown中的内容，并在其中使用Reaction组件。

有没有办法在MDX/Markdown文件中使用i18next/react-i18next包？

推荐答案

🌍使用i18next内部MDX：

导入MDX文件时，只需将其用作任何其他反应组件：

import { default as SomeContent } from './some-content.mdx';

...

<SomeContent />

因此，您还可以向下传递一些道具，在本例中是t函数，并以一些特定的方式在内部使用它：

import { default as SomeContent } from './some-content.mdx';

export const SomeComponent: React.FC = React.memo((props) => {
  const { t } = useTranslation();

  return (
    <SomeContent t={ t } someProp="Some value" />
  );
});

如果要检查此操作是否有效，或者要查看可以从MDX文件中访问哪些道具，请在文件中添加以下内容：

<pre>{ JSON.stringify(props, null, '  ') }</pre>
<pre>{ typeof props.t }</pre>

对于上面的示例，它将显示：

{"someProp":"Some value"}
function

请注意，您不能在&raw"；MD元素中使用这些道具，即使您在它们周围添加了包装器：

### Doesn't work: { props.t('some.translation') }

Doesn't work: { props.t('some.translation') }.

Doesn't work: <>{ props.t('some.translation') }</>.

Doesn't work: <Fragment>{ props.t('some.translation') }</Fragment>.

Doesn't work: <span>{ props.t('some.translation') }</span>.

因此您必须编写HTML标记：

<h3>Works: { props.t('some.translation') }</h3>

<p>Works: { props.t('some.translation') }.</p>

<p>Works: <>{ props.t('some.translation') }</>.</p>

<p>Works: <Fragment>{ props.t('some.translation') }</Fragment>.</p>

<p>Works: <span>{ props.t('some.translation') }</span>.</p>

🧩使用i18next中的MDX：

如果在i18next配置中设置了returnObjects: true，则还可以在翻译文件中添加MDX组件：

import { default as ContentEN } from './content.en.mdx';
import { default as ContentES } from './content.es.mdx';

i18next.use(initReactI18next).init({
  resources: {
    en: {
      translation: {
        content: ContentEN,
      },
    },
    es: {
      translation: {
        content: ContentES,
      },
    },
  },

  returnObjects: true,
}));

然后您可以像这样在您的任何组件中使用它(是的，您也可以向下传递t或任何其他道具，就像以前一样：

export const SomeComponent: React.FC = React.memo((props) => {
  const { t } = useTranslation();
  const Content = t('content');

  return (
    <Content t={ t } someProp="Some value" />
  );
});

🏃使用i18next内部@mdx-js/runtime：

如果您使用@mdx-js/runtime，那么您应该将道具传递为scope：

import { default as SomeContent } from './some-content.mdx';

export const SomeComponent: React.FC = React.memo((props) => {
  const { t } = useTranslation();

  return (
    <MDX components={ ... } scope={ { t, someProp: 'Some value' } }>{ props.mdx }</MDX>
  );
});

这篇关于如何在带有MDXJS的MDX/Markdown文件中使用I18Next/Reaction-I18Next？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！