2

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

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

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

<FirstDayOfMonth/>

对此：

<FirstDayOfMonth lang="fr"/>

但是我需要为每个 .mdx 文件中的每个组件都这样做。

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

我想将它传递给 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",
}
4

1 回答 1

2

您可以在将简码传递给时添加这些道具，方法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 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>
        </>
       ...
  );
};
于 2021-08-26T23:39:36.227 回答