如何在react-markdown中使用自定义组件

编程问答 2022-06-05

问题描述

上下文：我有一个Next.js的Chakra UI网站。我有一些用户提供的markdown内容，这些内容是在运行时从外部来源（例如GitHub README.md进行回购）获取的。

现在，默认情况下，react-markdown（基于remarkjs）将HTML <img>标记用于降价图像（![]()）。我想在用户提供的降价中使用new <Image /> component released in Next.js 10。另外，我还想用相应的Chakra UI组件替换其他标签。

我该怎么做？

解决方案 

// utils/parser.tsx

import Image from 'next/image';

export default function ImageRenderer({ src,alt }) {
  return <Image src={src} alt={alt} unsized />;
}

，然后在所需页面中：

//pages/readme.tsx

import ReactMarkdown from 'react-markdown';
import imageRenderer from '../utils/parser';

// `readme` is sanitised markdown that comes from getServerSideProps
export default function Module({ readme }) {
  return <ReactMarkdown allowDangerousHtml={true} renderers={{ image: imageRenderer }} children={readme} />
}

与其他元素相同...

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

chakra-uireactjsreactjsremarkjs