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 或 span 或其他）

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

参考文献：

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

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

React is rendering md (remarkable) as a string

html

javascript

markdown

reactjs