Question

我已经成功地使用了React的dangerouslySetInnerHTML来呈现我从API获得的HTML字符串响应，但现在我需要将一个单击处理程序添加到由dangerouslySetInnerHTML设置的某些响应的部分。有没有办法向dangerouslySetInnerHTML conent添加处理程序？示例：

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

这不起作用。 dangerouslySetInnerHTML（）不适用于JSX。更好的策略是让AJAX调用简单地返回所需的字符串和（链接和标题）并提供具有这些值作为道具的组件。该组件只是这种情况下的链接。

Answer 2

或者你可以在文件public / index.html中添加你的SVG，然后在你的组件中创建一个这样的函数

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

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

在SVG中添加您的活动onClick="NameVariable()"

在React dangerouslySetInnerHTML（）中渲染HTML字符串w / JSX表达式

2 个答案: