Javascript 使用React以类似降价的方式向用户评论添加功能

我正在开发一个React应用程序，用户可以在其中创建书面指南，这些指南通常引用地图上的图钉。我希望用户能够在他们的书面指南中以类似于标记的方式引用管脚，以便在指南的渲染版本中将管脚悬停在上方时高亮显示

但是，我不知道如何处理用户生成的文本，以便它能够调用文本呈现所在的react组件中的函数

我发现了一个关于如何使用处理点击事件的问题，我很乐意采用类似的方法，但我不知道如何在coffeescript中我的React组件的范围内获得onclick中调用的函数

以下是来自上面链接的公认答案：

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

var renderer=new marked.renderer（）；
renderer.link=（href，title，text）=>{
renderer.link=（href，title，text）=>{
const interceptWithThisFunction=（e）=>{
console.log（'click event capture'，e）；
}
返回``；
}

我不明白为什么这会在es6中工作……因为，当我在如下所示的coffeescript中对其进行编码时，我得到：Uncaught ReferenceError:InterceptWithThis函数未定义。

renderer = new marked.Renderer()
renderer.link = (href, title, text) ->
  interceptWithThisFunction = (e) ->
      console.log('click event caught', e)
  "<a onClick='interceptWithThisFunction' href='#' title='#{title}'>#{text}</a>"

renderer=new-marked.renderer（）
renderer.link=（href，title，text）->
interceptWithThisFunction=（e）->
console.log（'click event capture'，e）
""

---

这是正确的方法吗？当前设置为interceptWithThisFunction的onClick是否有方法调用我的React组件上的函数？

我真的找不到通用的“React-marked”库。因此我可以假设，tokeniser可以返回这个React-flavored-marked中的JSX，然后您可以编写类似以下内容：

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

renderer.link=（href，title，text）=>{
renderer.link=（href，title，text）=>{
const interceptWithThisFunction=（e）=>{
console.log（'click event capture'，e）；
}
返回(
);
}

---

如果不是这样的话，那么我只能建议将函数移到窗口，并将onclick处理程序添加到html中，比如

谢谢你的回答Bloomca！我相信原始海报所指的库是，但read me是从主read me借来的，所以我想我错过了区别！无论如何，我认为你的解释是p很可能是正确的，今晚我会进一步调查。