reactjs - 如何从 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

您可以将自定义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}
/>