无头组件只是一个无样式组件，还是还有更多内容？
网络已经通过要求定义样式来将样式与内容分开
在 css 中而不是 html 中。这种架构允许每个网页都采用全局
设计标准，无需定义任何特定于页面的样式。
随着网络演变成一个应用程序平台，开发人员寻找方法
他们不断增长的代码库更易于维护。如今，事实上的策略是
组织应用程序代码就是定义小型、轻量级的组件，这些组件可以
一起组成。因此，组件成为
中的组成单位现代网络开发。
为了封装，组件通常会同时定义 html 和 css。
虽然这使它们更容易创作，但它们也可能更难
紧密结合到现有的设计系统中。这一点尤其正确
对于从外部供应商进口的第三方组件。
无头组件通过重新引入
之间的分离来解决这一挑战内容和风格。然而现在分离是沿着组件边界的
反对 html 和 css 之间的关系。它们是创建出色的无头组件的关键
关键在于设计组件的接口，以便开发人员可以
清晰、轻松地应用自己的风格。
转发相关道具
从最基本的意义上来说，无头组件只是一个无样式的组件。
开发人员必须能够将自己的 css 应用到 html 元素中
组件定义.
对于简单的组件，这可能只是转发 classname 的问题
prop 到根元素，以便开发人员可以在他们的
中使用类选择器css.
如果你的组件与原生 html 元素具有相同的语义，你可以使用
来自 react 的 componentprops 类型，以确保所有相关的 props
可转发。请记住省略任何您不希望用户使用的道具
您的组件能够覆盖。
import { type componentprops } from 'react'function submitbutton({ ...props }: omit<componentprops, 'type'>) { return }
提供预定义类
对于包含一个或多个子元素的组件，开发者可能会
想要单独设置每个元素的样式。
支持这一点的一个策略是依赖
css 组合器。
例如，无头画廊组件的样式可能如下：
/* root container */.gallery {}/* gallery items container */.gallery > ul {}/* gallery item */.gallery > ul > li {}/* next and previous buttons */.gallery button {}
但是这种方法产生了一个巨大的问题，因为现在
的内部 html 结构该组件是其公共 api 的一部分。这会阻止您修改
稍后构建，而不会破坏下游代码。
更好的策略是为每个主要子元素预定义类。这边
开发人员可以使用类选择器，而不依赖于任何特定的 html
结构：
.xyz-gallery {}.xyz-gallery-next-button {}.xyz-gallery-previous-button {}.xyz-gallery-items-container {}.xyz-gallery-item {}
记住给你的类添加前缀，这样它们就不会与
冲突开发者自己的风格。
支持自定义布局
提供预定义的类可能是使开发人员能够实现的最快方法
设置你的组件的样式。然而，这种方法的一个缺点是
html 结构无法自定义。
这可能并不重要。毕竟，纯 html 的使用方式已经相当灵活了
可以渲染。然而，有时开发人员会按顺序获取额外的 html
来完成某些设计。如果您查看几乎所有的源代码
网站，您可能会看到大量无语义的
元素，
其唯一目的是定义弹性或网格布局，直观地对子项进行分组
边框内的元素或创建新的堆叠上下文。
您可以通过将无头组件拆分为
来支持此类用例多个相关组件。这样开发者就可以自由添加自己的
将元素布局到组件。例如，开发人员可以嵌入 next 和
自定义 flexbox 容器中图库示例中的上一个按钮：
{data.map((item) => ( {item.content} ))}
.gallery-items-container {}.gallery-buttons-container { display: flex; gap: 0.5rem; justify-content: flex-end;}
这些类型的组件通常使用
实现要传递的上下文
它们之间的数据。他们需要更多的工作来设计、实施和
文档。然而，它们所带来的多功能性通常意味着额外的努力
值得。
允许组件被覆盖
少数用例需要无头组件管理布局
其子组件。一个例子可能是层次树视图
允许通过拖放对其项目进行重新排序。另一个用例可能是
允许单页应用程序用 a 替换默认的锚元素有助于客户端路由的自定义链接组件。
允许开发人员定义自定义布局的高级策略是
允许通过 props 覆盖正在渲染的实际子组件：
}}/>
这使开发人员可以完全控制每个子项中渲染的内容
组件，同时允许无头组件管理其整体
结构.
您甚至可以允许开发人员自定义组件的根元素
通过道具。例如，这个按钮组件允许开发者渲染它
作为其他东西：
import { type elementtype } from 'react'function headlessbutton({ as, ...props }: { as?: elementtype }) { const component = as ?? 'button' return }
例如，为了让辅助技术将按钮视为链接，
开发人员可以指定应该使用锚元素来渲染
按钮：
Actually a link
概括
无头组件比不包含任何组件的组件要多得多
风格。优秀的无头组件是完全可扩展的，并允许开发人员
自定义整个内部 html 结构。
以上就是使无头组件易于设计的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1629724.html
微信扫一扫 
支付宝扫一扫 
