如何將react組件傳遞給危險地設置InnerHtml？

Question

假設我無法在源代碼中更改此語句：

<div dangerouslySetInnerHTML={{ __html: template }} />  

如何替換React組件的模板？ 喜歡：

<div dangerouslySetInnerHTML={{ __html: someReactComponent }} />  

如何在中插入reactjs組件？

Answer 1

正如FrankerZ所說 ，

您為什么還要這樣做？ <div><someReactComponent /></div> 。 為什么使用“危險”一詞是有原因的...如果需要，請避免使用它。

是的，顯然。 您不應該在大多數時間都盡可能地dangerouslySetInnerHTML地使用dangerouslySetInnerHTML 。

如果您嘗試呈現靜態標記，則可以使用renderToStaticMarkup 。 鏈接的帖子還指出，但由於在React實例中被使用而無法正常工作。 您需要從ReactDOMServer使用它：

import ReactDOMServer from 'react-dom/server';
ReactDOMServer.renderToStaticMarkup(statticElement)

這不會創建React內部使用的額外DOM屬性，例如data-reactroot。 如果您想將React用作簡單的靜態頁面生成器，這將很有用，因為去除多余的屬性可以節省一些字節。

有關更多信息，請參閱文檔 。