reactjs - 在 react 中使用标记

Question

我想在reactjs中使用标记，如reactjs docs中所述.

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

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

import { marked } from 'marked';

不幸的是，导入语句不起作用。标记未定义。我该如何导入此处标记的内容，以便我可以使用它？

Answer 1

这是将 marked 与 React 一起使用的一种方法:

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

// package.json
{
  dependencies: {
    react: "^17.0.0",
    marked: "^4.0.0",
  },
}

在 .jsx(或相关)文件中导入标记:

import { marked } from "marked";

使用dangerouslySetInnerHTML方法如下例所示:

import React from "react";
import { marked } from "marked";

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

dangerouslySetInnerHTML属性使您能够使用原始 (HTML) 标记。确保take care when using this attribute ，不过!

替代(安全)

如果您不想使用dangerouslySetInnerHTML并安全地渲染 HTML。试试marked-react ，其内部使用 marked将 html 元素渲染为 React 组件

npm i marked-react

import Markdown from "marked-react";

const MarkdownComponent = () => {
  return <Markdown>{rawmarkdown}</Markdown>;
};

另一个选择是 react-markdown

<小时/>