本技能建立在 render-markdown 之上，需先阅读该技能以了解语法配置、解析器选项、AST 与核心信任边界。以下内容均来自资料。
用途
该技能用于在 React 应用中渲染 Markdown 源码或 MarkdownDocument。React 适配器要求 React 18 或更高版本。
主要能力
- 使用 @tanstack/markdown/react 的 Markdown 组件直接渲染源码；Markdown 返回一个 React fragment。资料示例在应用自己的语义元素中包裹 Markdown，例如用 article 包裹。
- 通过 components 进行组件替换：可以替换发出的链接等元素，组件映射以发出的标签名（如 a）为键，而非 AST 判别名（如 link）。已知的内建键会推断出对应的 React props，任意扩展组件标签名也受支持。
- 使用解析器先解析一次，再重复渲染：用 @tanstack/markdown/parser 的 parseMarkdown 创建文档，然后交给 Markdown 渲染。解析器选项与文档转换应在创建文档时应用；渲染器选项无法追溯改变其结构。
- 服务端静态渲染：可配合 react-dom/server 的 renderToStaticMarkup 使用 Markdown 组件。核心静态输出已针对与 renderHtml() 的结构等价性进行测试。
- 通过低层节点 API 组合：可使用 @tanstack/markdown/react 的 renderMarkdownReact(document) 返回 ReactNode；仅在需要自定义树组合、使用单个公开 AST 节点时，才使用 renderBlockReact 或 renderInlineReact。
使用方式
资料中的典型用法：在组件中导入 Markdown，将 source 作为子元素传入，并用 article 等语义元素包裹。要替换组件时，定义 components 对象（例如 a 组件根据 href 是否以 http 开头决定是否添加 rel 与 target），以 satisfies MarkdownComponents 约束，然后作为 Markdown 的 components 属性传入。要先解析再渲染时，调用 parseMarkdown 得到 document，再将其作为 Markdown 的子元素。服务端可调用 renderToStaticMarkup 包裹 article 与 Markdown 生成静态 HTML 字符串。低层组合时可调用 renderMarkdownReact(document)。
常见错误与限制
- 注入 HTML 而非 React 节点：不要用 renderHtml 生成字符串再通过 dangerouslySetInnerHTML 注入；HTML 字符串路径会绕过 React 组件替换并建立不必要的可信 HTML 边界。应使用 Markdown 组件。
- 按 AST 节点名而非标签名映射组件：components 的键应为 a 等发出的标签名，而不是 link 等 AST 判别名。
- 在 React 中期待 HTML 扩展钩子：MarkdownExtension.renderHtml 是 HTML 专用的；可移植的自定义输出应使用 ComponentNode 与发出的标签对应的组件映射（示例中通过 transformDocument 返回 type: 'component'、tagName: 'doc-panel' 的节点，再在 components 中映射 'doc-panel'）。
- 对不可信输入启用原始 HTML：使用 allowHtml 时 React 会使用 dangerouslySetInnerHTML，而 TanStack Markdown 不会净化该原始 HTML；对不可信输入应不加 allowHtml。
- 渲染器一致性与 React 定制之间的张力：核心 React SSR 已针对 renderHtml() 测试；React 组件替换、原始 HTML、高亮器输出与仅 HTML 的扩展钩子属于应用控制的边界，不在该一致性保证范围内。可移植的 ComponentNode 输出参见 custom-extensions。
适用场景
资料未单独列出具体适用场景；从内容看，适用于在 React 18+ 应用中按语义元素渲染 Markdown 源码或复用已解析文档，并在需要时对链接等发出标签替换为自定义 React 组件，以及进行静态 SSR 输出。
限制与暂未提供
资料未提供收费、价格、平台支持范围、性能指标或完整 API 列表。关于 render-markdown 的共享 MarkdownInput、解析器选项、AST 行为与语法配置，需参见 render-markdown；关于可移植扩展输出，参见 custom-extensions；关于审计原始 HTML、高亮器输出、不可信内容与 SSR 边界，参见 production-pipelines。