处理 Markdown React 组件中呈现的链接的点击事件

Question

我正在使用 React 和 React-marked 在组件内渲染 markdown。

Markdown 内容是用户定义的，有时包含链接。

拦截 Markdown 链接上的点击事件的最佳方法是什么？我显然可以使用 jQuery，但想知道是否有更优雅的方式使用反应事件？

谢谢

Answer 1

您必须按照此处所述覆盖默认链接令牌渲染： https: //github.com/LinuxBasic/react-marked#overriding-renderer-methods

var marked = require('marked');
var renderer = new marked.Renderer();

renderer.link = (href, title, text) => {
    const interceptWithThisFunction = (e) => {
        console.log('click event caught', e);
    }
    return `<a onClick="interceptWithThisFunction" href="${href}" title="${title}">${text}</a>`;
}