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

Posted 2023-03-08

【中文标题】如何在 react-markdown 中使用自定义组件

【英文标题】：How to use custom components in react-markdown

【发布时间】：2021-02-15 05:46:39

【问题描述】：

上下文：我有一个带有Chakra UI 的Next.js 站点。我有一些用户在运行时从外部来源（例如，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 />

其他元素也一样...

【参考方案1】：

react-markdown 允许您定义自己的渲染器。我最近做了类似的事情。我想使用 figure 和 figurecaption 元素。所以，我创建了自己的图像渲染器 react 组件。

组件

export default function ImageRenderer(props) 
    const imageSrc = props.src;
    const altText = props.alt;
    return (
        <figure className="wp-block-image size-large is-resized">
            <img
                data-loading="lazy" 
                data-orig-file=imageSrc
                data-orig-size="1248,533"
                data-comments-opened="1"
                data-image-meta="&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;"
                data-image-title="builtin_vs_dotnetwarp"
                data-image-description=""
                data-medium-file=imageSrc + "?w=300"
                data-large-file=imageSrc + "?w=750"
                src=imageSrc + "?w=10241"
                alt=altText
                srcSet=imageSrc + "?w=1024 1024w, " + imageSrc + "?w=705 705w, " + imageSrc + "?w=150 150w, " + imageSrc + "?w=300 300w, " + imageSrc + "?w=768 768w, " + imageSrc + "?1248w"
                sizes="(max-width: 707px) 100vw, 707px" />
            <figcaption style= textAlign: "center" >altText</figcaption>
        </figure>
    );

我使用如下渲染器

<ReactMarkdown source=blogResponse.data.content escapeHtml=false renderers= "code": CodeBlockRenderer, "image": ImageRenderer  />

renderers= "code": CodeBlockRenderer, "image": ImageRenderer 是您提到自定义渲染器的地方。

【讨论】：

但我仍然不知道如何设置自定义标题h1...h6 标签。

我从来不用修改标题。你能分享你的代码吗？

我不一定要，但我想使用 Chakra UI 的 Heading 组件。我查看了渲染器文档，发现它有一个 heading 选项，但我不知道如何区分 h1 和 h2。你能指点我更好的渲染器文档吗？回购：github.com/maximousblk/next-nest-test

对于标题，道具将有一个名为 level 的属性，您可以使用它来区分 h1、h2 ..h6。您可以在此处找到示例代码。 github.com/Dhrutara/blogs.dhrutara.com.blogs/tree/main/…