將任意html對象轉換爲js中的字符串

我想渲染一個html對象反應。我需要採取HTML，將其傳遞到反應作爲String並讓它在那裏呈現。我不確定如何繼續。像將任意html對象轉換爲js中的字符串

的HTML對象可以是任何東西

<p>Hey man&nbsp;</p> 
<p>nlkansnsa</p> 
<p>as</p> 
<p><strong>asasas</strong></p> 
<p><strong>knla</strong></p> 
<p><br></p> 
<ul> 
    <li><strong>point 1&nbsp;</strong></li> 
    <li><strong>point 2</strong></li> 
    <li><strong>point 3&nbsp;</strong></li> 
</ul> 
<p><br></p>

來源

2017-04-24 Yash Sharma

你能澄清你所說的「HTML對象」的意思是什麼您已經粘貼有哪些最有可能被用字符串表示的HTML文檔在JavaScript中。你問你如何在React中渲染它，給定HTML爲字符串？ –

是的，我想渲染這反應 –

這是一個非常鬆散的問題。你應該對你具體的問題更精確，而不是問一般的問題。你應該包括你已經編寫的代碼，並且表明你希望從那個代碼中得到什麼樣的輸出結果，它是否按你打算的方式工作。 –

使用dangerouslySetInnerHTML到render包含html元素，像這樣的字符串：

<div dangerouslySetInnerHTML={{ __html: "<div>hello</div>" }}></div>

可以傳遞任何變量還包含該字符串，如此：

let htmlString = "<div>hello</div>"; 

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

檢查DOC。

檢查這個例子：

let string = "<p>Hey man&nbsp;</p><p>nlkansnsa</p><p>as</p><p><strong>asasas</strong></p><p><strong>knla</strong></p><p><br></p><ul><li><strong>point 1&nbsp;</strong></li><li><strong>point 2</strong></li><li><strong>point 3&nbsp;</strong></li></ul><p><br></p>"; 
 

 
var App =() => { 
 

 
    return(
 
     <div> 
 
     <div dangerouslySetInnerHTML={{ __html: "<div>hello</div>" }}></div> 
 
     <div dangerouslySetInnerHTML={{ __html: string }}></div> 
 
     </div> 
 
    ) 
 

 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='app'/>

來源

2017-04-24 12:46:54

謝謝:)它的工作原理 –

將任意html對象轉換爲js中的字符串

回答

相關問題