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__.')
    }}
/>

将“标记”的渲染输出反映为文本

1 个答案: