使无头组件易于设计

无头组件只是一个无样式组件，还是还有更多内容？

网络已经通过要求定义样式来将样式与内容分开
在 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'&gt;) {
  return <button type="submit"></button>
}
</componentprops>

提供预定义类

对于包含一个或多个子元素的组件，开发者可能会
想要单独设置每个元素的样式。

支持这一点的一个策略是依赖
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 容器中图库示例中的上一个按钮：

<gallery><galleryitems classname="gallery-items-container">
    {data.map((item) =&gt; (
      <galleryitem key="{item.id}">{item.content}</galleryitem>
    ))}
  </galleryitems><div classname="gallery-buttons-container">
    <gallerypreviousbutton><gallerynextbutton></gallerynextbutton></gallerypreviousbutton>
</div>
</gallery>

.gallery-items-container {
}

.gallery-buttons-container {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

这些类型的组件通常使用
实现 要传递的上下文
它们之间的数据。他们需要更多的工作来设计、实施和
文档。然而，它们所带来的多功能性通常意味着额外的努力
值得。

允许组件被覆盖

少数用例需要无头组件管理布局
其子组件。一个例子可能是层次树视图
允许通过拖放对其项目进行重新排序。另一个用例可能是
允许单页应用程序用 a 替换默认的锚元素 有助于客户端路由的自定义链接组件。

允许开发人员定义自定义布局的高级策略是

允许通过 props 覆盖正在渲染的实际子组件：

<treeview nodes="{[...]}" components="{{" customrow customdragpreview:><div classname="drag-preview"></div>
  }}
/&gt;
</treeview>

这使开发人员可以完全控制每个子项中渲染的内容

组件，同时允许无头组件管理其整体
结构.

您甚至可以允许开发人员自定义组件的根元素

通过道具。例如，这个按钮组件允许开发者渲染它
作为其他东西：

import { type elementtype } from 'react'

function headlessbutton({ as, ...props }: { as?: elementtype }) {
  const component = as ?? 'button'
  return <component></component>
}

例如，为了让辅助技术将按钮视为链接，

开发人员可以指定应该使用锚元素来渲染
按钮：

<headlessbutton as="a">Actually a link</headlessbutton>

概括 无头组件比不包含任何组件的组件要多得多

风格。优秀的无头组件是完全可扩展的，并允许开发人员
自定义整个内部 html 结构。

以上就是使无头组件易于设计的详细内容，更多请关注知识资源分享宝库其它相关文章！