从dangerouslySetInnerHtml内容调用React类功能

对于我正在使用ReactJS开发的应用程序，我必须向要返回JSON对象（如果成功）的服务发出ajax调用或少量的HTML代码（如果不成功）。这个HTML代码中有一个链接，它需要在我的反应应用程序中启动模式控件。我无法更改从ajax调用返回的HTML，因为它在其他应用程序中使用。从dangerouslySetInnerHtml内容调用React类功能

的HTML将是这个样子：

<span>ERROR MESSAGE HERE.</span> 
<span> 
    <a data-error-code="141096"> 
     <u>See details.</u> 
    </a> 
</span>

当用户点击该“查看详情”链接，模态应该打开，去获得来自服务器的详细信息，并在显示它模态。这在网站的其他领域已经有效。

我正在努力处理onClick()事件附加到<a>标签。我在我的反应组件上有一个方法，HTML将以名称showErrorModal呈现，它将打开错误详细模式。

任何帮助，非常感谢！

更新：一个jsFiddle与我需要的样本可以找到here。在这种情况下，我硬编码了我注入div区域的HTML。我需要做的是将 onClick()事件添加到 htmlToInjectHTML字符串中的锚标记中，以呼叫 handleClick()。我无法修改 htmlToInject的内容，因为它是由服务器端生成的，我无法控制它。这几乎是服务器返回的确切结构，我需要错误消息传递的原因是因为它基于错误是动态的（例如：“这个优惠券适用的包中没有任何项目”vs “此优惠券已过期”vs“您没有资格使用此优惠券”）。单独的消息在个人 <span>标签中返回。在服务器调用中，我也会得到返回的错误代码，因此我不必担心读取 data-error-code属性。我回来从服务器上的样子：

{ 
    success: false, 
    error-code: 123456, 
    error: "some HTML goes here" 
}

当数据调用返回时，我做了this.setState()设置的3个值，所以我已经知道的错误代码是什么。

来源

2015-10-15 molson504x

因此，您显示的HTML应该由组件的'render（）'或对话框渲染？请说明您需要处理点击的组件的render（）方法。 – JMM

如何在网站的其他部分添加onClick事件？ – Joshua

@JMM从服务器返回的HTML被注入组件的'div'。这个HTML包含一个锚标签，我需要添加一个'onClick（）'来调用组件上的方法来打开模式对话框。我会用一个jsfiddle来更新这个问题。 – molson504x

我使用了一些jQuery的应用在拿捏到位（updated jsFiddle）：

componentDidMount: function() { 
    $('.outsideHtml a').click(function(e){ 
     alert($(e.target).attr('data-error-code')) 
    }) 
}

你可能想componentDidUpdate代替或以及componentDidMount，如果组件渲染HTML前的初始状态（如“加载...”状态）。您可能还需要在点击处理函数（或使用ES2015）中进行一些关于在组件实例上调用方法的讨论。

我发现jQuery的on方法没有捕获由React插入的DOM（至少通过dangerouslySetInnerHTML）。我猜React的DOM操作绕过了jQuery依赖的东西。在调用componentDid...函数时，DOM已准备好用于jQuery。

添加click事件处理程序可能可以在没有jQuery的DOM中相对容易地实现，但概念将是相同的。

来源

2015-12-28 21:15:58

我忘了这个问题，但是，这几乎是我们最终决定的。我们只是在更新后才做的，因为数据是在组件装载之后加载的（它需要用户先输入代码，然后根据已知代码列表检查代码）。我们实际上也在使用'on'方法，而这似乎起作用。我们正在通过设置一个变量来引用'this'来做一些“这个”争论。 – molson504x

从dangerouslySetInnerHtml内容调用React类功能

回答

相关问题