[英]React plain text to html code
我從API獲得了一個對象列表。 每個對象的值之一是純字符串:
snippet: "Chainsmokers were re-formed as an EDM DJ duo in 2012 under the management of <span class="searchmatch">Adam</span> Alpert in New York City. Pall, who had grown up DJing, was introduced to"
我想將此純字符串轉換為html。 我怎么做?
編輯:我嘗試做的是映射React中的列表,如下所示:
const list = props.responseData.map(item => (
<li key={item.pageid}>
{item.title}
<br />
{item.snippet}
</li>
));
代碼段顯示為純字符串,而不是HTML代碼。 編寫item.snippet.innerHTML不起作用。 它顯示一個空列表。
我想到了。 我需要將它放在具有特殊屬性的div中:
<div dangerouslySetInnerHTML={{ __html: item.snippet }} />
現場例子
class App extends React.Component { constructor() { super(); this.state = { snippet: `Chainsmokers were re-formed as an EDM DJ duo in 2012 under the management of <span class="searchmatch">Adam</span> Alpert in New York City. Pall, who had grown up DJing, was introduced to` } } render() { return ( <div dangerouslySetInnerHTML={{ __html: this.state.snippet }} /> ); } } ReactDOM.render(<App />, document.getElementById('root'));
<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='root'></div>
如果要在具有指定id
的div中顯示obj.snippet
,這將非常簡單
HTML
<div id="myDiv"></div>
JS
document.getElementById('myDiv').innerHTML = obj.snippet;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.