Передача общей опоры всем компонентам в файле многомерных выражений без добавления опоры для каждого компонента

У меня есть файлы mdx с компонентами, которые должны знать язык.

Множество компонентов. И все они должны знать региональные особенности.

В файлах .mdx я могу изменить их вот так:

      <FirstDayOfMonth/>

к этому:

      <FirstDayOfMonth lang="fr"/>

Но тогда мне нужно было бы сделать это для каждого компонента в каждом файле .mdx.

Есть ли способ сделать опору доступной для всех компонентов, используемых в MDX?


Я подумал передать его в MDXRenderer, примерно так:

      <MDXProvider>
  <MDXRenderer lang={currentLang}>{body}</MDXRenderer>
</MDXProvider>

Или доступ к передней панели из компонентов.

Но оба подхода не документированы и не дали результатов.

Лучшие идеи?

1 ответ

Вы можете добавить эти реквизиты при передаче шорткодов в MDXProvider путем итерации по карте и возврата новых компонентов с введенными свойствами по умолчанию.

      import FirstDayOfMonth from 'path/to/FirstDayOfMonth';

const addProps = (components, defaultProps) => {
  const withProps = {};

  for (const [key, Component] of Object.entries(components)) {
    withProps[key] = (props) => <Component {...defaultProps} {...props} />
  }

  return withProps;
}

const shortcuts = { FirstDayOfMonth, SomeOtherComponent };

const Layout = ({ children }) => {
  const someDefaultProps = {
    lang: "es",
    something: "else",
  };

  const shortcodesWithProps = useMemo(
    () => addProps(shortcodes, someDefaultProps),
    someDefaultProps
  );

  return (
        ...
        <>
          <MDXProvider components={shortcodesWithProps}>
            {children}
          </MDXProvider>
        </>
       ...
  );
};
Другие вопросы по тегам