Как использовать i18next / response-i18next внутри файлов MDX / Markdown с MDXJS?

???? Использование 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 в своей i18next конфигурации, вы также можете добавить 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>
  );
});