是否可以在mdxjs包中使用react-i18next？

Question

我们使用MDXJS包在markdown中编写内容，并在其中包含组件。

是否可以在markdown中使用react-i18next软件包？

Answer 1

🌍在i18next中使用MDX：

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

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

请注意，即使在它们周围添加了包装器，也不能在“原始” 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>

🧩在MDX中使用i18next：

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

MDX

然后您可以在任何组件中使用它（是的，您也可以像以前一样传递

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

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

  returnObjects: true,
}));

或任何其他道具：

t