使无头组件易于设计

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《使无头组件易于设计》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

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

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

提供预定义类

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

支持这一点的一个策略是依赖
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
来完成某些设计。如果您查看几乎所有的源代码
网站，您可能会看到大量无语义的

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

.gallery-items-container {
}

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

<treeview
  nodes={[...]}
  components={{
    customrow,
    customdragpreview: (props) => <div classname="drag-preview" {...props} />
  }}
/>

import { type elementtype } from 'react'

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

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

PHP 函数引用参数与匿名函数

上一篇

PHP 函数引用参数与匿名函数

下一篇

使用 Java 进行函数式数据转换