Reactコンポーネントでは、<span>をclickabelにしてこの反応コンポーネントの関数を呼び出す方法は？

Question

反応コンポーネントMyCompで、 私は解析されたマークダウンテキストを持っています。このテキストのすべてのスパンをクリック可能にし、MyCompの関数を呼び出したいと思います。

私はこれを達成するためにこの文章を使用しますが、グローバルなJavaScript関数しか呼び出せません。 let clickableSub = sub.replace(/<span>/g, '<span onclick="showDict(this)">')

Answer 1

イベント委任を使用する必要があります。マークダウンをレンダリングするコンテナにイベントハンドラをバインドし、イベントが<span>要素で発生するかどうかを確認します。例えば。

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

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