在React（帶有Next.js的SSR）中呈現格式化（未分級）的HTML

Question

如何在React（帶有Next.js的SSR）中呈現格式化（未分級）的HTML？

預期輸出：

<div> 
    <div> 
     <input type="text" /> 
    </div> 
</div> 

現在接受：

<div><div><input type="text"/></div></div> 

TY！

Answer 1

您需要在實際返回到瀏覽器之前格式化輸出。至於nextjs，首先切換到自定義服務器nexjs custom server and routing和演練this答案漂亮的打印HTML。使用nextjs或反應SSR，這可能無法作爲內置的可配置選項。

Answer 2

您或許正在尋找dangerouslysetinnerhtml。它允許你傳遞一個你想要呈現爲原始HTML的字符串。

function createMarkup() { 
    return {__html: '<div><div><input type="text"/></div></div>'}; 
} 

function MyComponent() { 
    return <div dangerouslySetInnerHTML={createMarkup()} />; 
}