FT 组件

FT 组件将 Python 对象转换为 HTML。

FT，或称“FastTags”，是 FastHTML 的显示组件。事实上，在 FastHTML 的语境中，“组件”一词通常与 FT 是同义词。

例如，当我们查看一个 FastHTML 应用，特别是视图以及各种函数和其他对象时，我们会看到类似下面的代码片段。我们需要关注的是 return 语句。

from fasthtml.common import *

def example():
    # The code below is a set of ft components
    return Div(
            H1("FastHTML APP"),
            P("Let's do this"),
            cls="go"
    )

让我们继续调用我们的函数并打印结果。

example()

<div class="go">
  <h1>FastHTML APP</h1>
  <p>Let&#x27;s do this</p>
</div>

如您所见，当从一个 Python 可调用对象（如函数）返回时，ft 组件会被转换为它们的 XML 或类 XML 内容（如 HTML）的字符串表示形式。更简洁地说，ft 将 Python 对象转换为 HTML。

现在我们知道了 ft 组件的外观和行为，就可以开始理解它们了。在最基础的层面上，ft 组件：

是 Python 的可调用对象，具体包括函数、类、类的方法、lambda 函数，以及任何其他使用括号调用并返回值的东西。
返回一个包含三个元素的序列值：
1. 要生成的标签
2. 标签的内容，它是一个由字符串/元组组成的元组。如果元素是元组，那它就是 ft 组件的三元素结构
3. 一个包含 XML 属性及其值的字典
FastHTML 的默认 ft 组件的单词以大写字母开头。例如 Title()、Ul() 和 Div()。自定义组件则包含像 BlogPost 和 CityMap 这样的东西。

FastHTML 如何命名 ft 组件

在命名 ft 组件时，FastHTML 似乎打破了 PEP8 规范。具体来说，PEP8 规定在命名变量、函数和实例化的类时，我们应使用 snake_case_pattern（蛇形命名法）。也就是说，单词小写并用下划线分隔。然而，FastHTML 对 ft 组件使用了 PascalCase（帕斯卡命名法）。

这样做有几个原因：

ft 组件可以由任何可调用类型创建，所以遵循任何一种特定的命名模式都没有太大意义。
它使 FastHTML 代码更易于阅读，因为任何使用帕斯卡命名法的东西很可能就是一个 ft 组件。

默认 FT 组件

FastHTML 拥有超过 150 个 FT 组件，旨在加速 Web 开发。其中大部分都与 HTML 标签相对应，例如 <div>、<p>、<a>、<title> 等等。此外，还添加了一些额外的标签，包括：

Titled，Title() 和 H1() 标签的组合。
Socials，用于渲染流行的社交媒体标签。

`fasthtml.ft` 命名空间

有些人喜欢在遵循 PEP8 的同时使用命名空间来编写代码。如果这是您的偏好，项目可以使用 fasthtml.ft 命名空间进行编码。

from fasthtml import ft

ft.Ul(
    ft.Li("one"),
    ft.Li("two"),
    ft.Li("three")
)

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

属性

这个例子展示了许多关于 ft 组件如何处理属性的重要知识点。

#| echo: False
1Label(
    "Choose an option", 
    Select(
2        Option("one", value="1", selected=True),
3        Option("two", value="2", selected=False),
4        Option("three", value=3),
5        cls="selector",
6        _id="counter",
7        **{'@click':"alert('Clicked');"},
    ),
8    _for="counter",
)

1: 第 2 行表明 FastHTML 推荐使用 Label 标签包裹其字段。
2: 在第 5 行，我们可以看到，设置为布尔值 True 的属性在渲染时只显示属性名。
3: 在第 6 行，我们演示了设置为布尔值 False 的属性不会出现在渲染的输出中。
4: 第 7 行是一个例子，说明了整数和其他非字符串值在渲染输出中是如何被转换为字符串的。
5: 在第 8 行，我们使用 cls 参数来设置 HTML 的 class 属性。我们在这里使用 cls 是因为 class 是 Python 中的保留关键字。在渲染过程中，这将被转换成单词“class”。
6: 第 9 行演示了传递给 ft 组件的任何带前导下划线的命名参数，在渲染前其前导下划线都会被移除。这对于处理 Python 中的保留关键字很有用。
7: 在第 10 行，我们有一个不能表示为 Python 变量的属性名。在这种情况下，我们可以使用解包的 dict 来表示这些值。
8: 在第 12 行使用 _for 是另一个演示参数在渲染时移除前导下划线的例子。我们也可以使用 fr，因为它会被展开为 for。

这将渲染出以下 HTML 片段：

Label(
    "Choose an option", 
    Select(
        Option("one", value="1", selected=True),
        Option("two", value="2", selected=False),
        Option("three", value=3),  # <4>,
        cls="selector",
        _id="counter",
        **{'@click':"alert('Clicked');"},
    ),
    _for="counter",
)

<label for="counter">
Choose an option
  <select id="counter" @click="alert(&#x27;Clicked&#x27;);" class="selector" name="counter">
    <option value="1" selected>one</option>
    <option value="2" >two</option>
    <option value="3">three</option>
  </select>
</label>

定义新的 ft 组件

创建自定义的 ft 组件来生成 FastHTML 库中没有的非标准标签是可能的，有时也很有用。FastHTML 支持灵活地创建和定义这些新标签。

更多信息，请参阅定义新的 ft 组件参考页面。

FT 组件和类型提示

如果您使用类型提示，我们强烈建议将 FT 组件视为 Any 类型。

原因是 FastHTML 在很大程度上利用了 Python 的动态特性。尤其是在 FT 组件方面，它可以被评估为 FT|str|None|tuple，以及任何支持 __ft__、__html__ 和 __str__ 方法的对象。这涉及到 Python 栈的足够多的部分，以至于将除 Any 之外的任何类型赋给 FT 类型都将被证明是一场令人沮丧的尝试。

FastHTML 如何命名 ft 组件

默认 FT 组件

fasthtml.ft 命名空间

属性

定义新的 ft 组件

FT 组件和类型提示

`fasthtml.ft` 命名空间