JSX

使用 JSX (React) 创建页面和布局。

配置参数

extensions string[]: The list of extensions this plugin applies to
Default:
[ ".jsx", ".tsx" ]
pageSubExtension string: Optional sub-extension for page files
includes string: Custom includes path
Default:
site.options.includes

描述

JSX（或者 TypeScript 的等效物 TSX）是一种模板语言，用于创建和渲染 HTML 代码，在一些框架（如 React）中非常流行。这个插件增加了对 JSX / TSX 的支持，以使用 React 渲染来创建页面和布局。

请注意，此插件仅提供 JSX 支持以在构建时生成页面。这意味着客户端属性（如 onClick）将不起作用。如果你想使用 React 来为浏览器创建代码（如 SPA），请使用 ESbuild 插件。

安装

在你的 _config.ts 文件中导入此插件以使用它：

import lume from "lume/mod.ts";
import jsx from "lume/plugins/jsx.ts";

const site = lume();

site.use(jsx(/* 选项 */));

export default site;

配置

你可能需要在 deno.json 中添加以下 compilerOptions 以配置 JSX 转换：

{
  // ...
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "npm:react",
    "jsxImportSourceTypes": "npm:@types/react"
  }
}

Note

前往使用 TypeScript 以获取关于在 Lume 中使用 TypeScript 的更多信息。

创建页面

要使用此格式创建页面，只需在你的站点中添加一个扩展名为 .jsx 或 .tsx 的文件。此格式的工作方式与 JavaScript/TypeScript 文件完全相同，但增加了在默认导出中导出 JSX 代码的能力：

export const title = "Welcome to my page";
export const layout = "layouts/main.vto";

export default (data: Lume.Data, helpers: Lume.Helpers) => (
  <>
    <h1>{data.title}</h1>
    <p>这是我使用 lume 发布的第一个帖子。希望你喜欢！</p>
  </>
);

请注意，此页面使用 layouts/main.vto Vento 布局来包裹内容。（你可以混合使用不同的模板语言，如 Nunjucks 和 JSX。）

创建布局

要在 JSX 中创建布局，只需将 .jsx 或 .tsx 文件添加到 _includes 目录。请注意，我们需要使用变量 children 来渲染页面内容，而不是 content。区别在于 content 是一个字符串，并且由于它被转义而无法在 JSX 中轻松使用，而 children 是未渲染的 JSX 对象。

export default ({ title, children }: Lume.Data, helpers: Lume.Helpers) => (
  <html>
    <head>
      <title>{title}</title>
    </head>
    <body>
      {children}
    </body>
  </html>
);

Tip

Lume 将自动为生成的 .html 页面添加缺失的 <!DOCTYPE html>。

组件

你可以在 JSX 中创建 Lume 组件，方法是在 _components 文件夹中创建文件。例如：

export default function ({ children }) {
  return (
    <button className="my-button">
      {children}
    </button>
  );
}

要在你的模板中渲染组件，请使用 comp 变量：

export default function ({ comp }) {
  return (<comp.Button>点击我！</comp.Button>);
}

Important

由于 Deno 的限制，使用 import Button from "./_components/button.ts" 导入组件不适用于热重载，因为它无法更新任何导入的模块而无需重启整个进程。因此，强烈建议使用 comp 变量来使用组件，以缓解此限制。