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

Question

我正在构建一个 React 应用程序，用户可以在其中创建书面指南，这些指南通常会引用地图上的图钉。我希望用户能够在他们的书面指南中以类似降价的方式引用引脚，以便在指南的呈现版本中悬停时突出显示引脚。

但是，我不知道如何处理用户生成的文本，以便它可以调用渲染文本的 react 组件中的函数。

我发现了一个 similar question here 询问如何使用 marked 处理点击事件，并且很高兴遵循类似的方法，但我无法弄清楚如何在我的 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>`;
    }

我对为什么这会在 es6 中起作用感到困惑......因为，当我如下所示在咖啡脚本中编写代码时，我得到：Uncaught ReferenceError:interceptWithThisFunction is not defined。

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>"

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

Answer 1

我真的找不到常见的“反应标记”库。所以我可以假设，tokeniser 可以在这个 react 风格的标记中返回 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>
    );
}

如果不是这样，那么我只能建议将函数移动到窗口，并将 onclick 处理程序添加到 html，如<a onclick="interceptWithThisFunction" ...。