在 React 项目中渲染 Markdown 文件
// MarkdownRenderer.jsx
import React, { useEffect, useState } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
const MarkdownRenderer = ({ mdFilePath }) => {
const [content, setContent] = useState('');
useEffect(() => {
const fetchMarkdownFile = async () => {
const response = await fetch(mdFilePath);
const text = await response.text();
setContent(text);
};
fetchMarkdownFile();
}, [mdFilePath]);
return (
<div>
<ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
</div>
);
};
export default MarkdownRenderer;