Как анализировать встраиваемые ссылки из Markdown и отображать пользовательские компоненты React

Question

Я хочу встроить теги Twitter из Markdown в Html. В настоящее время я использую response-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 Component для того же самого.

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}
/>