在React State中傳遞html標簽的正確方法是什么？

Question

我正在使用React創建Blog。 我正計划從服務器引入博客的主要內容，並通過Props / State傳遞給React Component。 博客內容可以具有html標簽，例如：

• 塊引用
• h2和h3
• img，視頻，嵌入代碼等

我希望將Blog的內容與這些標記一起存儲在Database / json文件中，並在頁面加載時呈現該內容。 但是在React中似乎很難做到這一點。 我們可以通過三種方式實現這一目標：

1. dangerouslySetInnerHTML
2. 將內容存儲在表單數組對象[html content]中（將String內容推送到數組將不起作用）。
3. 為所有html實體傳遞unicode字符。

這個課題很好地討論了這些方法：

使用reactjs渲染原始HTML

我的查詢是：

1. 是否應該對所有流程/體系結構進行更改以解決此問題？
2. 從ajax調用插入大型html內容以響應組件以進行渲染的最佳方法是什么？
3. 要使功能完整且動態/可伸縮的Blog應該考慮哪些設計決策？
4. 如何在動態內容（例如博客內容（存儲在某些文件/數據庫中）中）上獲得SEO。 ？

Answer 1

沒有dangerouslySetInnerHTML有什么特別的。 無論是否使用React，從javascript渲染HTML總是很危險的，這取決於所述HTML的來源。 例如，如果要渲染自己創建並保存到數據庫的帖子，則不會有危險（除非數據庫受到威脅）。 但是，假設您對某個帖子發表了評論，並且用戶發送了惡意代碼作為評論。 所有其他訪問該頁面的用戶，都將從數據庫中獲取惡意代碼，然后在其瀏覽器中“危險地”執行該惡意代碼。 因此，您需要做的是通過在保存到數據庫之前清理所有用戶輸入來確保HTML源是安全的。 您可以使用一些庫來實現此目的，例如-http://htmlpurifier.org/

關於SEO，您可以使用服務器端渲染-https: //www.smashingmagazine.com/2016/03/server-side-rendering-react-node-express/

確保您在url上擁有所需的所有信息，因此您不必依賴“狀態”來呈現頁面，如帖子ID等。您可以使用React Router- https：// github來實現。 COM / reactjs /反應路由器