Question

我想在reactjs docs中描述的reactjs中使用标记。

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

我使用babel，所以我导入标记为：

import { marked } from 'marked';

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

Answer 1

以下marked与React使用的一种方法：

确保您已安装react-marked
在项目的marked文件中加入package.json：

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

在marked （或相关）文件中导入.jsx：

import marked from 'marked';

使用tutorial7.js example in the React Tutorial 中所述的dangerouslySetInnerHTML方法（如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）标记。但请确保take care when using this attribute！

注意 步骤4 中代码示例中的React.Component方法基于Agnew＆＃39; s "Hello World" example以及来自Goel和Silveira的这篇React.Component vs React.createClass文章。

Answer 2

With the marked-wrapper react-marked-markdown：

redis

Answer 3

如果您只想导入标记：

import marked from 'marked';

然后调用组件中的函数：

marked('# Markdown');

Answer 4

这是将 marked 与 React Hooks 结合使用的另一种方式：

<块引用>

创建您的 MarkedConverter 组件

import { useState } from 'react'
import marked from 'marked'

export const MarkedConverter = () => {
  const [markedVal, setMarkedVal] = useState(
    '# Welcome to my React Markdown Previewer!'
  )
  return <div dangerouslySetInnerHTML={createMarkUp(markedVal)}></div>
}

<块引用>

创建标记函数并从 MarkedConverter 组件传递值

export const createMarkUp = (val) => {
 return { __html: marked(val) }
}

<块引用>

最后，您可以将 MarkedConverter 组件导入到您的任何组件中

Answer 5

以下是有关如何使用带有react标记的示例：

标记为NPM的安装：npm i标记
将其导入您的react应用程序（此示例是使用create-react-app创建的），并使用它 example of a react component using "marked"
在浏览器中显示的结果： preview

使用标记反应

5 个答案: