Question

我有一个带有按钮和div的react组件。单击该按钮时，该div中将填充来自服务器的ajax响应。

服务器响应为JSON格式，并且JSON属性之一包含其中包含HTML内容的字符串值。该属性值将分配给组件状态。

在输出中，我看到原始HTML显示在页面上。我设法通过'react-render-html'软件包来解决这个问题。

现在，我需要将事件附加到其中具有某些类的某些HTML元素。使用jQuery的.on（'。classname'）用于将事件附加到此类元素。有没有办法，我可以使用React达到同样的效果。事件处理程序应该是组件内部的方法。

Answer 1

从React文档中：

危险地设置InnerHTML

dangerouslySetInnerHTML是React在内部使用innerHTML的替代品   浏览器DOM。通常，从代码设置HTML是有风险的，因为   很容易在不经意间将您的用户暴露给跨站点脚本   （XSS）攻击。因此，您可以直接从React设置HTML，但是   危险地键入SetInnerHTML并使用__html传递对象   键，以提醒自己这很危险。例如：
function createMarkup() {
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

因此，您的API调用将填充某些组件或应用程序状态，然后将其作为元素上的dangerouslySetInnerHTML属性传递。

对于特定于类的处理程序，我不确定是否有一个优雅的解决方案。这是很开始的“气味”，如果可能的话，您应该重新考虑数据库中HTML的实现。

也就是说，您仍然可以在没有Jquery的情况下在本机JavaScript中的类上设置事件处理程序，您可以在此处进行设置。您需要注意的是，如果您的应用程序/组件重新渲染，则将删除这些事件处理程序。如果您想采用这种方法，则需要仔细管理HTML /事件处理程序以在渲染上重新初始化自身，或者以不重新渲染的方式管理渲染流程，除非您认为合适，否则不要重新渲染。

Answer 2

来不及回答，但是他们是使用“ react-html-parser”

完成任务的另一种方法

import ReactHtmlParser from 'react-html-parser' ;
<p>ReactHtmlParser("<h2>Hello world</h2>")</p>

这是将html字符串解析为React元素的更好方法。

有没有办法将ReactJs事件附加到来自Ajax JSON响应的动态插入的HTML？

2 个答案: