解析Markdown文件生成React组件文档

import React from ‘react’;

import MarkdownView from ‘react-showdown’;

export default function App() {

const markdown = `

Welcome to React Showdown 👍

To get started, edit the markdown in `example/src/App.tsx`.

| Column 1 | Column 2 |

|----------|----------|

| A1 | B1 |

| A2 | B2 |

`;

return (

<MarkdownView

markdown={markdown}

options={ { tables: true, emoji: true }}

/>

);

};

通过MarkdownView这个组件，可以将一串markdown格式的文本转化为html。

另外我们注意到它的选项，tables为true，如果不设置这个的话，markdown中的table格式将不会被转化成表格。第二个emoji为true是支持emoji转换。

这个时候你可能要问，这只是转换了一下markdown文件而已，转换react组件呢？

我们可以看一下下面这个官方示例：

import MarkdownView from ‘react-showdown’;

function CustomComponent({ name }: { name: