如何将onClick功能传递到使用字符串文字创建的范围？

Question

I have an HTML object created using string literals and used Dangerously Set HTML. Basically, I just had to create span and pass onClick while creating the string literal but when I pass the function which is bound in the constructor. later I get the error that this is not a function. How can I pass a function in onClick while creating the HTML object using string literals in react? this HTML is set dangerously in render().

var html=`<span onClick="myFunc()">${text}</span>`;

Answer 1

this just a string, you can't have eventListerner on it.

Or declare a DOM element like this

var MySpan = Document​.create​Element('span');
MySpan.textContent = text;
MySpan.onclick = myFunc;


//....

function myFunc() {
  alert('span clicked !');
}

Answer 2

you can do like this: var html = {text}. Now the 'html' can be sue as pure component in he mail component to render in DOM but here this.myFunc is wrong because pure component will not carry any scope by itself , ou have to pass the function as prop or use HOC for that.

And for more clearity kindly gothrough this pure component documentation of react : react pure component