自定义组件

大多数情况下，默认的 ft components 就是你所需要的（例如 Div、P、H1 等）。

先决知识

如果你不知道什么是ft组件，你应该先阅读解释ft组件的说明。

然而，在许多情况下，您需要一个自定义的 ft 组件来创建一个独特的 HTML 标签（例如）。在 FastHTML 中有很多选项可以做到这一点，本节将逐一介绍它们。通常，您希望使用适合您需求的最高级别选项。

现实世界的例子

这个外部教程讲述了一种实际情况，在这种情况下，您可能希望使用自定义 ft 组件创建一个自定义 HTML 标签。看到一个现实世界的例子是理解本指南内容为何有用的好方法。

非字符串

第一种方法是使用 NotStr 类将 HTML 标签作为字符串使用。它作为一次性解决方案有效，但随着复杂性的增加，它很快变得难以处理。然而，我们可以看到，您可以使用 NotStr 生成与开箱即用组件相同的 XML。

from fasthtml.common import NotStr,Div, to_xml

div_NotStr = NotStr('<div></div>') 
print(div_NotStr)

<div></div>

自动创建

下一个（更好的）方法是让FastHTML为您生成组件函数。正如您在我们的 assert 中看到的，这会创建一个按照我们的期望生成HTML的函数。尽管在 fasthtml.components 源代码中没有 Some_never_before_used_tag 函数（您可以通过查看源代码验证这一点），但这仍然有效。

提示

通常这些标签是必要的，因为一个 CSS 或 Javascript 库创建了一个不属于默认 HTML 的新 XML 标签。例如，zero-md javascript 库寻找标签以知道在哪运行它的 javascript 代码。大多数 CSS 库通过基于 class 属性创建样式来工作，但它们也可以将样式应用于它们自己创建的任意 HTML 标签。

from fasthtml.components import Some_never_before_used_tag

Some_never_before_used_tag()

<some-never-before-used-tag></some-never-before-used-tag>

手动创建

自动创建并不是魔法。这只是调用一个 python 函数 __getattr__，你可以自己调用它以获得相同的结果。

import fasthtml

auto_called = fasthtml.components.Some_never_before_used_tag()
manual_called = fasthtml.components.__getattr__('Some_never_before_used_tag')()

# Proving they generate the same xml
assert to_xml(auto_called) == to_xml(manual_called)

知道这一点，我们就知道通过修改 ___getattr__ 函数创建组件的方式，可以创建具有与FastHTML默认行为不同的行为的不同函数！这只需要几行代码，阅读它的功能是更深入理解组件的一个好方法。

提示

双下划线方法和函数是名称开头和结尾都有双下划线的特殊函数。它们在python中的特定时间被调用，因此您可以使用它们来实现适合您特定用例的定制行为。如果您不知道python的工作原理，它们可能看起来很神奇，但它们非常常用来修改python的默认行为（__init__ 可能是最常见的一个）。

在一个模块中 __getattr__ 被调用来获取一个属性。在 fasthtml.components 中，这被定义为自动为您创建组件。

例如，如果您想要一个创建的组件，而不与 pathlib.Path 冲突，您可以做到这一点。 FastHTML 会自动创建与组件 1:1 映射且具有一致名称的新组件，这几乎总是您想要的。但在某些情况下，您可能想要自定义这一点，您可以使用 ft_hx 函数以不同于默认的方式做到这一点。

from fasthtml.common import ft_hx

def ft_path(*c, target_id=None, **kwargs): 
    return ft_hx('path', *c, target_id=target_id, **kwargs)

ft_path()

<path></path>

我们可以在那个函数中添加我们需要的任何行为，所以让我们来看看在一些项目中可能需要的一些逐渐复杂的例子。

标签中的下划线

现在我们了解了FastHTML是如何生成组件的，我们可以用各种方式创建我们自己的组件。例如，也许我们需要一个使用下划线的奇怪HTML标签。FastHTML在标签中将_替换为-，因为标签中的下划线非常不寻常且很少是您想要的，尽管偶尔会出现。

def tag_with_underscores(*c, target_id=None, **kwargs): 
    return ft_hx('tag_with_underscores', *c, target_id=target_id, **kwargs)

tag_with_underscores()

<tag_with_underscores></tag_with_underscores>

标签中的符号（即 @）

有时候您可能需要使用一个标签，其中包含在Python函数名称中不允许使用的字符（再次强调，非常不寻常）。

def tag_with_AtSymbol(*c, target_id=None, **kwargs): 
    return ft_hx('tag-with-@symbol', *c, target_id=target_id, **kwargs)

tag_with_AtSymbol()

<tag-with-@symbol></tag-with-@symbol>

标签属性中的符号（即@）

也可能是HTML标签中的一个参数使用了在python参数中无法使用的字符。要处理这些，你可以使用字典来定义这些参数。

Div(normal_arg='normal stuff',**{'notNormal:arg:with_varing@symbols!':'123'})

<div normal-arg="normal stuff" notnormal:arg:with_varing@symbols!="123"></div>