在 React dangerouslySetInnerHTML() 中渲染带有 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

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

Answer 2

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

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

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

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