如何使用 contentlayer 创建自定义 JSX 组件?

问题描述 投票:0回答:1

我尝试使用 contentlayer 创建自定义组件,但它没有按预期工作。起初,我认为我必须在 .mdx 文件中导入自定义组件。但是,每次我这样做时,contentlayer 都会抛出错误并且不会将我的 .mdx 文件转换为 json 格式。当我深入研究这个问题时,我找到了一个解决方案,我在下面分享。

reactjs components jsx mdx contentlayer
1个回答
0
投票
// page.tsx

import { useMDXComponent } from "next-contentlayer/hooks";

const Button = () => {
  return <button>Click me</button>;
};

const customComponents = {
  Button
};


const SinglePost = ({ article }) => {

  const MDXContent = useMDXComponent(article.body.code);

  return (
    <>
      <MDXContent components={customComponents} />
    </>
  );
};
// file.mdx

### Call Button directly in your mdx file. No need to import it, it works automatically.

<Button />

© www.soinside.com 2019 - 2024. All rights reserved.