使用标记为反应

Question

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

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

我使用babel，因此我输入的标记如下：

import { marked } from 'marked';

不幸的是，导入语句不起作用。标记未定义。我必须如何导入此处标记的标记才能使用它？

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教程dangerouslySetInnerHTML中的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

   setinnerhtml="{this.getMarkdownText()}">
   
     }
   }

正如React教程中所讨论的那样，使用dangerouslySetInnerHTML属性使您能够使用原始（HTML）标记。不过，使用此属性时请务必小心！

注意： 步骤4React.Component中的代码示例中的方法基于Agnew的“ Hello
World”示例，以及Goel和Silveira
撰写的此React.Component与React.createClass文章中的注释。