Question

在反应组件MyComp中，我有一个解析的markdown文本，我想让这个文本中的所有span都可以点击并调用MyComp的函数。

我用这句话来实现它，但它只能调用一个全局的javascript函数。 var data={key1:[], key2:[], key3:[{key1:"a"}, {key2:"b"}], key4:[{key1:"c"}, {key2:"d"}]} var cleanData = Object.keys(data).reduce((obj, key) => { if (data[key] && data[key].length) { obj[key] = data[key] } return obj }, {})

Answer 1

您应该使用事件委派。将事件处理程序绑定到您在其中呈现markdown的容器，然后检查事件是否源自<span>元素。 E.g。

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

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

在React组件中，如何在clickabel中创建<span>并调用此react组件的功能？

1 个答案: