javascript - 使用 React 以类似于 Markdown 的方式向用户评论添加功能

Question

我正在构建一个 React 应用程序，用户可以在其中创建书面指南，这些指南通常会引用 map 上的图钉。我希望用户能够在其书面指南中以类似 Markdown 的方式引用引脚，以便将鼠标悬停在指南的渲染版本中时突出显示引脚。

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

我找到了similar question here询问如何使用 marked 处理点击事件我很高兴遵循类似的方法，但我不知道如何在 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>`;
    }

我很困惑为什么这会在 es6 中工作...因为，当我在 CoffeeScript 中编写如下所示的代码时，我得到: Uncaught ReferenceError :interceptWithThisFunction 未定义。

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

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

Answer 1

我真的找不到常见的“ react 标记”库。所以我可以假设，标记器可以在这个 react flavor 标记中返回 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" ... .