從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類功能

回答

相關問題