{
  "url": "https://unifast.dev/zh-TW/docs/packages/react/hast-to-react/",
  "locale": "zh-TW",
  "title": "hastToReact()",
  "description": "將 HAST 根節點轉換為 React 元素。當您需要完整掌控編譯管線時使用的低階函式。",
  "section": "packages",
  "body": "```ts\n\n```\n\n## 函式簽名\n\n```ts\nfunction hastToReact(\n  hast: HastRoot,\n  options: HastToReactOptions,\n): unknown\n```\n\n## 參數\n\n### hast\n\n| 屬性 | 型別 | 預設值 | 說明 |\n|----------|------|---------|-------------|\n| `type` | `\"root\"` | — | 節點型別識別字 |\n| `children` | `HastNode[]` | — | 樹的子節點 |\n\n### options\n\nReact 元素建立設定\n\n| 屬性 | 型別 | 預設值 | 說明 |\n|----------|------|---------|-------------|\n| `createElement` | `CreateElement` | — | React 的 createElement 函式 |\n| `Fragment` | `unknown` | — | React 的 Fragment 元件 |\n| `components?` | `ComponentMap` | — | HTML 標籤名稱到自訂 React 元件的對應表 |\n\n## 用法\n\n```tsx\n\nconst result = compile(md, { outputKind: \"hast\" });\nconst hast: HastRoot = JSON.parse(result.output as string);\n\nconst element = hastToReact(hast, {\n  createElement,\n  Fragment,\n  components: {\n    pre: ({ children, ...props }) => <pre className=\"code-block\" {...props}>{children}</pre>,\n    a: ({ children, ...props }) => <a target=\"_blank\" rel=\"noopener\" {...props}>{children}</a>,\n  },\n});\n```\n\n## 範例\n\n### 基本用法\n\n```tsx\n\nconst result = compile(\"# Hello, **world**!\", { outputKind: \"hast\" });\nconst hast: HastRoot = JSON.parse(result.output as string);\nconst element = hastToReact(hast, { createElement, Fragment });\n\nfunction Page() {\n  return <div>{element}</div>;\n}\n```\n\n### 搭配 Shiki 高亮後的 HAST\n\n```tsx\n\nconst transformer = await createShikiTransformer({\n  themes: [\"github-dark\"],\n  langs: [\"typescript\"],\n});\n\nconst result = compile(md, { outputKind: \"hast\" });\nconst hast: HastRoot = JSON.parse(result.output as string);\nconst highlighted = transformer.transform(hast);\nconst element = hastToReact(highlighted, { createElement, Fragment });\n```\n\n### 伺服器端渲染\n\n```tsx\n\nconst result = compile(md, { outputKind: \"hast\" });\nconst hast: HastRoot = JSON.parse(result.output as string);\nconst element = hastToReact(hast, { createElement, Fragment });\nconst html = renderToString(element);\n\nconsole.log(html);\n// Rendered HTML string for SSR\n```\n\n## 行為\n\n- **屬性重新命名：** HTML 屬性會改為對應的 React 名稱（`class` 變 `className`、`for` 變 `htmlFor` 等）\n- **Style 解析：** CSS style 字串會被解析為 React style 物件\n- **className 陣列：** HAST 的 `className` 陣列會以空白字元串接\n- **布林屬性：** `true` 會輸出屬性，`false`、`null`、`undefined` 則會省略\n- **Raw 節點：** 會以行內 HTML 的方式渲染──處理不信任的輸入時，請搭配 `sanitize` 外掛（來自 `@unifast/node`）使用\n- **註解與 doctype：** 會被忽略（回傳 `null`）",
  "alternates": [
    {
      "locale": "en",
      "url": "https://unifast.dev/docs/packages/react/hast-to-react/",
      "api": "https://unifast.dev//api/docs/packages/react/hast-to-react.json"
    },
    {
      "locale": "ja",
      "url": "https://unifast.dev/ja/docs/packages/react/hast-to-react/",
      "api": "https://unifast.dev//api/ja/docs/packages/react/hast-to-react.json"
    },
    {
      "locale": "zh-CN",
      "url": "https://unifast.dev/zh-CN/docs/packages/react/hast-to-react/",
      "api": "https://unifast.dev//api/zh-CN/docs/packages/react/hast-to-react.json"
    },
    {
      "locale": "zh-TW",
      "url": "https://unifast.dev/zh-TW/docs/packages/react/hast-to-react/",
      "api": "https://unifast.dev//api/zh-TW/docs/packages/react/hast-to-react.json"
    },
    {
      "locale": "ko",
      "url": "https://unifast.dev/ko/docs/packages/react/hast-to-react/",
      "api": "https://unifast.dev//api/ko/docs/packages/react/hast-to-react.json"
    },
    {
      "locale": "fr",
      "url": "https://unifast.dev/fr/docs/packages/react/hast-to-react/",
      "api": "https://unifast.dev//api/fr/docs/packages/react/hast-to-react.json"
    },
    {
      "locale": "it",
      "url": "https://unifast.dev/it/docs/packages/react/hast-to-react/",
      "api": "https://unifast.dev//api/it/docs/packages/react/hast-to-react.json"
    },
    {
      "locale": "es",
      "url": "https://unifast.dev/es/docs/packages/react/hast-to-react/",
      "api": "https://unifast.dev//api/es/docs/packages/react/hast-to-react.json"
    },
    {
      "locale": "pt-BR",
      "url": "https://unifast.dev/pt-BR/docs/packages/react/hast-to-react/",
      "api": "https://unifast.dev//api/pt-BR/docs/packages/react/hast-to-react.json"
    },
    {
      "locale": "de",
      "url": "https://unifast.dev/de/docs/packages/react/hast-to-react/",
      "api": "https://unifast.dev//api/de/docs/packages/react/hast-to-react.json"
    },
    {
      "locale": "ru",
      "url": "https://unifast.dev/ru/docs/packages/react/hast-to-react/",
      "api": "https://unifast.dev//api/ru/docs/packages/react/hast-to-react.json"
    },
    {
      "locale": "hi",
      "url": "https://unifast.dev/hi/docs/packages/react/hast-to-react/",
      "api": "https://unifast.dev//api/hi/docs/packages/react/hast-to-react.json"
    },
    {
      "locale": "id",
      "url": "https://unifast.dev/id/docs/packages/react/hast-to-react/",
      "api": "https://unifast.dev//api/id/docs/packages/react/hast-to-react.json"
    },
    {
      "locale": "tr",
      "url": "https://unifast.dev/tr/docs/packages/react/hast-to-react/",
      "api": "https://unifast.dev//api/tr/docs/packages/react/hast-to-react.json"
    },
    {
      "locale": "vi",
      "url": "https://unifast.dev/vi/docs/packages/react/hast-to-react/",
      "api": "https://unifast.dev//api/vi/docs/packages/react/hast-to-react.json"
    }
  ]
}