如何解决如何从 Markdown 解析可嵌入链接并呈现自定义 React 组件
我想将 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}
/>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。