ant design中预览后端提供的markdown文档

Ant Design中提供了一个组件`<Typography>`来显示Markdown文档。你可以将Markdown文档从后端获取到，然后使用`<Typography>`组件进行渲染。

以下是一个示例代码：

import { Typography } from 'antd';

const { Title, Paragraph } = Typography;

function PreviewMarkdown({ markdown }) {
  return (
    <Typography>
      <Title level={2}>Markdown Preview</Title>
      <Paragraph>{markdown}</Paragraph>
    </Typography>
  );
}

export default PreviewMarkdown;

在上面的代码中，我们使用`<Typography>`组件来包含Markdown文档。我们还使用`<Title>`和`<Paragraph>`组件来设置标题和段落。

在父组件中，你可以从后端获取Markdown文档并将其传递到`PreviewMarkdown`组件中进行渲染：

import PreviewMarkdown from './PreviewMarkdown';

function App() {
  const [markdown, setMarkdown] = useState('');

  useEffect(() => {
    // 从后端获取Markdown文档
    fetch('/api/markdown')
      .then(response => response.text())
      .then(data => setMarkdown(data));
  }, []);

  return (
    <div>
      <PreviewMarkdown markdown={markdown} />
    </div>
  );
}

export default App;

在上面的代码中，我们使用`fetch`函数从后端获取Markdown文档，并在组件挂载时使用`useEffect`函数进行调用。然后，我们将Markdown文档传递到`PreviewMarkdown`组件中进行渲染。