将公共 prop 传递给 MDX 文件中的所有组件，而不将 prop 添加到每个组件

我有 mdx 文件，其中包含需要了解区域设置的组件。

很多组件。 他们都需要了解区域设置。

在 .mdx 文件中，我可以这样更改它们：

<FirstDayOfMonth/>

to that:

<FirstDayOfMonth lang="fr"/>

但随后我需要对每个 .mdx 文件中的每个组件执行此操作。

有没有办法让 mdx 中使用的所有组件都可以使用 prop？

我想将它传递给 MDXRenderer，如下所示：

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

或者从组件访问 frontmatter。

但这两种方法都没有记录，也没有给出任何结果。

更好的想法？

根据请求，相关依赖项列表：

  "dependencies": {
    "@mdx-js/mdx": "^1.6.22",
    "@mdx-js/react": "^1.6.22",
    "gatsby": "^3.6.2",
    "gatsby-plugin-copy-files-enhanced": "^1.1.1",
    "gatsby-plugin-mdx": "^2.11.0",
    "preact": "^10.5.13",
    "preact-render-to-string": "^5.1.19",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
}

你可以添加这些道具传递短代码 https://www.gatsbyjs.com/docs/mdx/importing-and-using-components/#make-components-available-globally-as-shortcodes to the MDXProvider通过迭代映射并返回注入默认 props 的新组件。

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 shortcodes = { FirstDayOfMonth, SomeOtherComponent };

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

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

  return (
        ...
        <>
          <MDXProvider components={shortcodesWithProps}>
            {children}
          </MDXProvider>
        </>
       ...
  );
};