javascript - React 将 md (remarkable) 渲染为字符串

Question

下面是我正在拉入另一个组件的组件的虚拟版本。

import React from "react"

var Remarkable = require('remarkable');
var md = new Remarkable();

const Info = (props) => {
  return (
    <div className="pop">
      <div>
<h1>{props.title}</h1>
{md.render('# Remarkable rulezz!')}
      </div>
    </div>
  )
}

export default Info;

在当前呈现的页面上。

(the title passed as props, as a h1, and...)
<h1># Remarkable rulezz!</h1>

所以当我希望它表现得像 html 时，它实际上将整个事物呈现为一个字符串。

我该怎么做？还是我错过了 md 的全部要点？谢谢

Answer 1

如果出于某种原因需要使用 React 按原样呈现 html，则需要使用 dangerouslySetInnerHTML 并使用任何标签(div 或 )包装内容跨度或其他东西)

<div dangerouslySetInnerHTML={{ __html: md.render('# Remarkable rulezz!') }} />

引用资料:

• https://facebook.github.io/react/tips/dangerously-set-inner-html.html