将组件 props 传递给 MDX Provider - ReactJS

Question

我正在使用 MDX Provider，如下所示：-

      <MDXProvider components={components}>
        <ButtonMarkdown />
      </MDXProvider>

组件是：-

import { Button, Heading } from './components/button';

const components = {
  pre: (props: any) => <div {...props} />,
  h1: Heading,
  h2: Heading,
  h3: Heading,
  code: Codeblock,
  inlineCode: Codeblock,
};

但是我希望能够将道具传递到我的降价文件中使用的标题组件中，例如：-

## Heading Two

应该改为：-

<Heading level="2">Heading Two</Heading>

我该怎么做才能确保我的降价被传递到相关组件的正确道具？

Answer 1

您可以在 MDXProvider 中提供多个级别的标题：

<MDXProvider components={{
  h1: Heading1,
  h2: Heading2,
  h3: Heading3,
  h4: Heading4,
  pre: Code,
  table: Table,
  th: TableHeading,
  tr: TableRow,
  td: TableCell,
  p: Paragraph
}}>
  {children}
</MDXProvider>

它们可以这样定义：

const Heading1: FC = ({ children }) => (
  <Heading level={1}>{children}</Heading>
);

const Heading2: FC = ({ children }) => (
  <Heading level={2}>{children}</Heading>
);

const Heading3: FC = ({ children }) => (
  <Heading level={3}>{children}</Heading>
);

const Heading4: FC = ({ children }) => (
  <Heading level={4}>{children}</Heading>
);

在 MDX 呈现时，second-level 标题 ## 最终将被 <Heading level={2}> 替换。

只是为了使这个答案更完整，这是实现正确的标题组件的一种方法，该组件将在级别属性为 1 时呈现 <h1>，依此类推：

export const Heading: FC = ({
  level = 1,
  children,
}) => {
  const HeadingElement = `h${level}`;
  return (
    <HeadingElement>
      {children}
    </HeadingElement>
  );
};

将组件 props 传递给 MDX Provider - ReactJS

Passing component props to MDX Provider - ReactJS

markdown

reactjs

react-props