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

问题描述

我正在使用React并进行反应标记，以在组件内渲染降价.

I'm using React and react-marked to render markdown within a component.

降价内容是用户定义的，有时包含链接.

The markdown content is user defined and sometime contains links.

拦截markdown链接上的click事件的最佳方法是什么?我显然可以使用jQuery，但想知道是否有使用响应事件的更优雅的方式?

What would be the best method of intercepting the click events on the markdown links. I could obviously use jQuery, but wondered if there is a more elegant way using react events?

谢谢

推荐答案

您必须按如下所述覆盖默认的链接令牌呈现: https://github.com/LinuxBasic/react-marked#overriding-renderer-methods

You have to override the default link token rendering as described here: 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>`;
}

这篇关于处理Markdown React组件中呈现的链接的点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！