从dangerouslySetInnerHtml内容

Question

对于我使用ReactJS开发的应用程序，我必须对服务进行ajax调用，该服务要么返回JSON对象（如果成功）或少量HTML代码（如果不成功） ）即可。这个HTML代码里面有一个链接，需要在我的反应应用程序中启动一个模态控件。我无法改变从ajax调用返回的HTML，因为它在其他应用程序中使用。

HTML看起来像这样：

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

当用户点击“查看详细信息”链接时，模式应该打开，从服务器获取详细消息并将其显示在模式中。这适用于网站的其他区域。

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

非常感谢任何帮助！

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

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

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

Answer 1

我在正确的地方使用了一些jQuery（updated jsFiddle）：

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

如果组件在呈现HTML之前具有初始状态（例如＆＃39;正在加载...），那么您可能希望componentDidUpdate代替componentDidMount而不是this。 ＆＃39;州）。您可能还需要在单击处理函数（或使用ES2015）中进行一些dangerouslySetInnerHTML争论来调用组件实例上的方法。

我发现jQuery的on方法没有捕获React插入的DOM（至少通过componentDid...）。我猜测React的DOM操作会绕过jQuery所依赖的东西。到调用private SQLiteDatabase db; //Global Variable. 函数时，DOM已经为jQuery做好了准备。

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