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

Posted 2023-03-03

【中文标题】使用 React 以类似降价的方式向用户评论添加功能

【英文标题】：Adding functionality to user comments in markdown-like fashion with React

【发布时间】：2016-12-31 08:51:01

【问题描述】：

我正在构建一个 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 组件上的函数？

【参考方案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" ...。

【讨论】：

感谢您的回答 Bloomca！我相信原始海报所指的图书馆是react-marked，但自述文件借用了主要的marked自述文件，所以我想我错过了区别！无论如何，我认为您的解释可能是正确的，今晚我将进行更多调查。