In React-Komponente, wie man <span> in einem clickabel und rufen Sie die Funktion dieser Komponente reagieren?

Question

In einer Reaktionskomponente MyComp, Ich habe einen geparsten Markdown-Text, ich möchte alle span in diesem Text anklickbar machen und eine Funktion von MyComp aufrufen.

Ich benutze diesen Satz, um es zu erreichen, aber es kann nur eine globale JavaScript-Funktion aufrufen.

Answer 1

Sie sollten Ereignisdelegation verwenden. Binden Sie den Ereignishandler an den Container, in den Sie den Markdown rendern, und überprüfen Sie dann, ob das Ereignis auf einem <span>-Element basiert. Z.B.

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

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