javascript - 从angerouslySetInnerHtml内容调用React类函数

Question

对于我使用 ReactJS 开发的应用程序，我必须对服务进行 ajax 调用，该服务要么返回 JSON 对象(如果成功)，要么返回少量 HTML 代码(如果不成功) )。该 HTML 代码内部有一个链接，需要在我的 React 应用程序中启动模式控件。我无法更改从 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 中呈现，这将打开错误详细信息模式。

非常感谢任何帮助!

<小时/> 更新:可以在 here 中找到包含我需要的示例的 jsFiddle 。 在本例中，我对要注入(inject)到 div 区域的 HTML 进行了硬编码。我需要做的是将 onClick() 事件添加到 htmlToInject HTML 字符串中的 anchor 标记以调用 handleClick() 。我无法修改 htmlToInject 的内容，因为它是在服务器端生成的，我无法控制它。这几乎是服务器将返回的确切结构，我需要错误消息的原因是因为它是基于错误的动态(例如:“您的包中没有该优惠券适用的元素”与“此优惠券已过期”与“您没有资格使用此优惠券”)。单独的消息在单独的 <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 之前具有初始状态(例如“正在加载.. 。' 状态)。您可能还需要在点击处理函数(或使用 ES2015)中进行一些 this 处理，以调用组件实例上的方法。

我发现 jQuery 的 on方法没有捕获 React 插入的 DOM(至少通过 dangerouslySetInnerHTML)。我猜测 React 的 DOM 操作绕过了 jQuery 所依赖的东西。当 componentDid... 函数被调用时，DOM 已经为 jQuery 做好了准备。

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