使用Typescript在React中进行Markdown

Z时代
2024-01-10
分类：问答

有没有办法使用Typescript在React中解析Markdown？

我正在尝试做类似的事情：

import * as ReactMarkdown from 'react-markdown'
// OR
import ReactMarkdown = require('react-markdown')

但是Typescript无法找到模块’react-markdown’，因为它没有定义：

错误：TS2307：找不到模块“ remark-markdown”。

如何定义模块并将其用作React组件？

回答：

我通过使用commonmark包解决了我的问题。他们有打字以及我环境所需的一切。这是我的实现：

import { HtmlRenderer, Parser } from 'commonmark'
export class MyComponent extends React.Component<{}, {}> {
  private post: string
  constructor () {
    super()
    let parser = new Parser()
    let renderer = new HtmlRenderer()
    this.post = renderer.render(parser.parse("**works** like a charm!"))
  }
  render () {
    return (
      <div dangerouslySetInnerHTML={ {__html: this.post} } />
    )
  }
}