如何在Deno的Fresh框架中使用ReactMarkdown？

你遇到的错误是因为ReactMarkdown默认适配React，而Preact的内部符号与React存在差异，导致服务端渲染时出现类型转换错误。可以通过以下步骤解决：

1. 修改导入语句，适配Preact #

将ReactMarkdown的导入替换为针对Preact兼容层的版本：

import ReactMarkdown from "https://esm.sh/react-markdown@7?alias=react:preact/compat";

这个导入参数会把ReactMarkdown依赖的React模块替换为Preact的兼容层，消除符号不兼容问题。

2. 正确在Fresh组件中使用 #

可以创建一个Island组件来封装ReactMarkdown（也可以直接在路由组件中使用）：

// islands/MarkdownViewer.tsx
import ReactMarkdown from "https://esm.sh/react-markdown@7?alias=react:preact/compat";

export default function MarkdownViewer() {
  return (
    <ReactMarkdown>
      ### hey there
      这是**加粗**文本，这是*斜体*文本。
    </ReactMarkdown>
  );
}

然后在路由页面中引入该组件：

// routes/index.tsx
import MarkdownViewer from "../islands/MarkdownViewer.tsx";

export default function Home() {
  return (
    <div className="p-4">
      <h1>Fresh 集成 ReactMarkdown 示例</h1>
      <MarkdownViewer />
    </div>
  );
}

额外说明 #

如果需要渲染动态Markdown内容，可以将内容作为props传入：

// islands/MarkdownViewer.tsx
import ReactMarkdown from "https://esm.sh/react-markdown@7?alias=react:preact/compat";

interface Props {
  content: string;
}

export default function MarkdownViewer({ content }: Props) {
  return <ReactMarkdown>{content}</ReactMarkdown>;
}

在路由中使用时：

<MarkdownViewer content="### 动态加载的标题\n这是一段动态生成的**Markdown**内容" />

内容的提问来源于stack exchange，提问作者TimDog