如何从 Markdown 解析可嵌入链接并呈现自定义 React 组件

编程问答 2022-05-15

问题描述

我想将 Twitter 标签从 Markdown 嵌入到 Html。我目前正在使用 react-markdown 来渲染如下


import gfm from 'remark-gfm'

const content = `#Hello <br/><hr/> <p>Please check out this tweet</p><br/> <p>https://twitter.com/adamwathan/status/1378480731651981322</p>`

....

<Markdown
 plugins={[gfm]}
 children={content} / >

我希望能够解析以 https://twitter.com 开头的任何内容，以便我可以为相同的内容渲染 React 组件。

解决方法

您可以将自定义 link 渲染器传递给 ReactMarkdown，该渲染器将使用您自己的逻辑处理链接。

<Markdown
    plugins={[gfm]}
    renderers={{
        link: (props) => {
            return props.href.startsWith('https://twitter.com') ? (
                <CustomTwitterComponent url={props.href} /> // Render Twitter links with custom component
            ) : (
                <a href={props.href}>{props.children}</a> // All other links
            );
        }
    }}
    children={content}
/>
react-markdownreactjsreactjsreactjsreactjsremarkjs