2015-05-29 122 views
0

所以我有這個程序,可以說,它類似於Facebook的張貼在牆上的東西,ReactJS重新渲染/重繪服務器生成視圖

一切都渲染的PHP服務器/笨框架上,併發送到客戶端,我需要使用ReactJS呈現這些職位,因爲我有真棒的事情,我喜歡裏面的每個這些後

  1. 做這樣
  2. 評論
  3. 編輯/報告

我不希望使用V8JS,因爲客戶端無法與PHP的服務器玩,只是需要的PHP腳本的工作就是這樣,

任何想法我怎麼能做到這一點的傢伙?非常感謝,

一個想法是可能,

裝入員額服務器渲染,然後做一個GET請求,並使用ReactJS再次呈現相同的帖子嗎?這會工作嗎?

或者有沒有辦法將所有ReactJS函數和事件附加到服務器呈現的html頁面?

回答

0

有關的客戶端/網絡瀏覽器反應以附接至現有的DOM結構(這是呈現例如服務器),它使用稱爲其被添加到根DOM元素data-react-checksum的屬性。例如,調用React.renderComponentToString將包含此屬性。

<div data-react-checksum="452232529"> 

當你同根元素調用renderElement,作出反應正常執行調用render,等等。但是,在render週期結束時,data-react-checksum相比發生了什麼局部計算。如果該值與DOM中已有的值(由服務器提供)匹配,則虛擬DOM將附加到現有的DOM元素。但要做到這一點,正如我所說的那樣,它必須完全匹配。

此外,您還需要在通常與React的虛擬DOM關聯的DOM元素上包含data-reactid屬性。

如果您無法在Web服務器上執行React渲染管道,則應該依靠使用Ajax來獲取數據。您可以通過PHP渲染整個頁面,然後在客戶端獲取數據並重新渲染頁面。但是,您需要決定是否對您的應用程序和用戶有意義。

我建議你考慮只使用React來處理網頁的交互式部分,然後根據需要在客戶端上構建這些整體。

+0

如果你看到這個https://jsfiddle.net/69z2wepo/9249/看到html,我該如何使用reactJS t重新呈現從服務器發送的html?請更新小提琴:) – Sahan

+0

我不明白你的意思。您需要編寫反映您的PHP代碼創建的結構的React組件。 jsfiddle中沒有任何更新。 – WiredPrairie

+0

@ user3656084如果您在服務器上生成了php中的html,並且您想在react.js中渲染相同的東西,則需要將所有內容寫入兩次。這就是人們在服務器上運行JS的原因,如果你不能這樣做,那就沒有其他捷徑了。 – FakeRainBrigand