我正在构建一个 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 组件上的函数?
最佳答案
我真的找不到常见的“ 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" ...
.
关于javascript - 使用 React 以类似于 Markdown 的方式向用户评论添加功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39119579/