在React dangerlysetinnerhtml()中渲染带有JSX表达式的HTML字符串

Question

我已经成功地使用React的dangerouslySetInnerHTML来呈现我从API获得的HTML字符串响应，但现在我需要添加一个点击处理程序到由dangerouslySetInnerHTML设置的某些响应的部分。是否有一种方法来添加处理程序到危险的setinnerhtml内容?例子:

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

这行不通。dangerlysetinnerhtml()不适用于JSX。更好的策略是让AJAX调用简单地返回所需的字符串和(链接和标题)，并将这些值作为道具提供给组件。在这种情况下，组件只是一个链接。

Answer 2

或者您可以在public/index.html文件中添加SVG，然后在组件中创建如下函数

doSomething() {
 console.log('ajajaj');
}
componentDidMount() {
 window.NameVarible =  this.doSomething;
}

并在SVG中添加事件onClick="NameVariable()"