javascript - 在react js中将任意随机html对象转换为字符串

Question

我想在React中渲染一个html对象。我需要获取 html，将其作为 String 传递给 React 并在那里渲染。我不确定如何继续。

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>

Answer 1

使用dangerouslySetInnerHTML来渲染包含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'/>