將來自“標記”的渲染輸出反應為文本

Question

我在React中使用Marked庫。 我遇到的問題是，當Marked包含正確的HTML元素時，其輸出將呈現為文本。 這是問題代碼：

class Main extends React.Component{
render() {
 console.log(this)
 console.log(marked('I am using __markdown__.'));
 return (
  <div className="container">
    <div className="row">
      <div className="col-md-6">
        {marked('I am using __markdown__.')}
      </div>
      <div className="col-md-6">
        <h1>Oh hello</h1>
      </div>
    </div>
  </div>
  )
 }
};

React.render( <Main />, document.getElementById('app'));

和html：

<div id="app"></div>

謝謝。

Answer 1

使用dangerouslySetInnerHTML 。 React阻止您進入xss，這就是逃生艙口。

<div
    className="col-md-6"
    dangerouslySetInnerHTML={{
        __html: marked('I am using __markdown__.')
    }}
/>