在React中危险地渲染带有JSX表达式的HTML字符串SetInnerHTML（）

Question

I have successfully used React's dangerouslySetInnerHTML to render HTML string responses I'm getting from an API, but now I need to add a click handler to parts of certain responses that are set by dangerouslySetInnerHTML. Is there a way to add handlers to dangerouslySetInnerHTML conent? Example:

var api_response = '<a onClick={this.props.methodName} href="www.google.com">example</a>';

return <div dangerouslySetInnerHTML={_markupFromString(api_response)}></div>

function _markupFromString (msg) {
    return { '__html': msg };
}

Answer 1

This isn't going to work. dangerouslySetInnerHTML() doesn't work with JSX. A better strategy would be to have the AJAX call simply return the required strings and (link and title) and supply a component with these values as props. The component is simply the link in this situation.

Answer 2

Or you can add your SVG in the file public/index.html then create In your component a function like this

doSomething() {
 console.log('ajajaj');
}

componentDidMount() {
 window.NameVarible =  this.doSomething;
}

And add your event onClick="NameVariable()" in the SVG