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

【问题标题】：How to parse Embeddable Links from Markdown and render custom React Components如何从 Markdown 解析可嵌入链接并呈现自定义 React 组件
【发布时间】：2021-06-30 14:37:55
【问题描述】：

我想将 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 组件。

【问题讨论】：

标签： reactjs next.js remarkjs react-markdown

【解决方案1】：

您可以将自定义的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-shortcodes 以使用正则表达式呈现。
@juliomalves 我正在使用完全相同的自定义链接渲染器，但某些 url 没有被渲染器捕获（这意味着对于某些链接，渲染器内的链接代码根本不会被调用）和链接只是显示为文本。知道为什么会发生这种情况吗？
你能给我一个没有被链接渲染器捕获的 URL 的例子吗？