Question

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

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

如果由于某种原因需要使用反应来呈现html，则需要使用dangerouslySetInnerHTML并使用任何标记（div或span或其他内容）包装内容

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

参考文献：

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

React将md（非凡）渲染为字符串

1 个答案: