我想使用reactjs文档中描述的reactjs中的标记。
<div>{marked(mystring)}</div>
我使用babel,因此我输入的标记如下:
import { marked } from 'marked';
不幸的是,导入语句不起作用。标记未定义。我必须如何导入此处标记的标记才能使用它?
下面是使用一种方法marked用React:
marked
React
包含marked在您的项目package.json文件中:
package.json
“dependencies”: { “react”: “^0.13.3”, “marked”: “^0.3.5” },
导入marked您的.jsx (或相关的) 文件:
.jsx
import marked from ‘marked’;
使用React教程dangerouslySetInnerHTML中的tutorial7.js示例 (如Janaka所述)中 描述的方法,或如下例所示:
dangerouslySetInnerHTML
tutorial7.js
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
正如React教程中所讨论的那样,使用dangerouslySetInnerHTML属性使您能够使用原始(HTML)标记。不过,使用此属性时请务必小心!
注意: 步骤4React.Component中的代码示例中的方法基于Agnew的“ Hello World”示例,以及Goel和Silveira 撰写的此React.Component与React.createClass文章中的注释。
React.Component