小编典典

使用标记为反应

reactjs

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

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

我使用babel,因此我输入的标记如下:

import { marked } from 'marked';

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


阅读 286

收藏
2020-07-22

共1个答案

小编典典

下面是使用一种方法markedReact

  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


      }
    }

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


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

2020-07-22