javascript - 在React组件中，如何在clickabel中制作并调用该React组件的函数？

Question

在 React 组件 MyComp 中，我有一个已解析的 Markdown 文本，我想使该文本中的所有跨度都可单击并调用 MyComp 的函数。

我用这句话来实现，但是只能调用全局的javascript函数。
let clickableSub = sub.replace(/<span>/g, '<span onclick="showDict(this)">')


Answer 1

您应该使用事件委托(delegate)。将事件处理程序绑定(bind)到渲染 markdown 的容器，然后检查事件是否源自 <span>元素。例如

function handler(event) {
  if (event.target.tagName === 'SPAN') {
    console.log(event);
  }
}

function MyComp({html}) {
  return <div onClick={handler} dangerouslySetInnerHTML={{ __html: html }} />
}