使用标记反应

Question

我想在reactjs文档中描述的reactjs中使用标记.

<div>{marked(mystring)}</div>

我使用babel所以我导入标记如下:

import { marked } from 'marked';

不幸的是,import语句不起作用.标记未定义.我如何在这里标记导入,以便我可以使用它？

Answer 1

下面是使用一种方法marked用React:

1. 确保您已安装 marked
2. 包含marked在项目的package.json文件中:

"dependencies": {
  "react": "^0.13.3",
  "marked": "^0.3.5"
},

3. 导入marked您的.jsx (或相关)文件:

import marked from 'marked';

4. 使用React TutorialdangerouslySetInnerHTML中的tutorial7.js示例中 描述的方法(如Janaka所述),或者如下例所示:

import React from 'react';
import marked from 'marked';

class MarkdownExample extends React.Component {
  getMarkdownText() {
    var rawMarkup = marked('This is _Markdown_.', {sanitize: true});
    return { __html: rawMarkup };
  }
  render() {
    return <div dangerouslySetInnerHTML={this.getMarkdownText()} />
  }
}

正如React Tutorial中所讨论的,使用该dangerouslySetInnerHTML属性可以使用原始(HTML)标记.但是,请确保在使用此属性时要小心!

注意:步骤4React.Component中的代码示例中的方法基于Agnew的"Hello World"示例以及Goel和Silveira的React.Component与React.createClass文章中的注释.