Можно ли использовать response-i18next с пакетом mdxjs?

Question

Мы используем пакет MDXJS для записи контента в уценке и включения в него компонентов.

Есть ли способ использовать пакет activ-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 в вашем i18next config, вы также можете добавить 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 или любой другой реквизит, как и раньше:

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>
  );
});