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

Question

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

Answer 1

您可以将自定义 a 组件传递给 ReactMarkdown，它将使用您自己的逻辑处理链接。

import Markdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

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

export default Index() {
    return (
        <Markdown
            remarkPlugins={[remarkGfm]}
            components={{
                a: 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
                    )
                }
            }}
        >
            {content}
        </Markdown>
    )
}

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

How to parse Embeddable Links from Markdown and render custom React Components

reactjs

remarkjs

next.js

react-markdown