無頭組件只是一個(gè)無樣式組件，還是還有更多內(nèi)容？
網(wǎng)絡(luò)已經(jīng)通過要求定義樣式來將樣式與內(nèi)容分開
在 css 中而不是 html 中。這種架構(gòu)允許每個(gè)網(wǎng)頁都采用全局
設(shè)計(jì)標(biāo)準(zhǔn)，無需定義任何特定于頁面的樣式。
隨著網(wǎng)絡(luò)演變成一個(gè)應(yīng)用程序平臺(tái)，開發(fā)人員尋找方法
他們不斷增長(zhǎng)的代碼庫更易于維護(hù)。如今，事實(shí)上的策略是
組織應(yīng)用程序代碼就是定義小型、輕量級(jí)的組件，這些組件可以
一起組成。因此，組件成為
中的組成單位
現(xiàn)代網(wǎng)絡(luò)開發(fā)。
為了封裝，組件通常會(huì)同時(shí)定義 html 和 css。
雖然這使它們更容易創(chuàng)作，但它們也可能更難
緊密結(jié)合到現(xiàn)有的設(shè)計(jì)系統(tǒng)中。這一點(diǎn)尤其正確
對(duì)于從外部供應(yīng)商進(jìn)口的第三方組件。
無頭組件通過重新引入
之間的分離來解決這一挑戰(zhàn)
內(nèi)容和風(fēng)格。然而現(xiàn)在分離是沿著組件邊界的
反對(duì) html 和 css 之間的關(guān)系。它們是創(chuàng)建出色的無頭組件的關(guān)鍵
關(guān)鍵在于設(shè)計(jì)組件的接口，以便開發(fā)人員可以
清晰、輕松地應(yīng)用自己的風(fēng)格。
轉(zhuǎn)發(fā)相關(guān)道具
從最基本的意義上來說，無頭組件只是一個(gè)無樣式的組件。
開發(fā)人員必須能夠?qū)⒆约旱?css 應(yīng)用到 html 元素中
組件定義.
對(duì)于簡(jiǎn)單的組件，這可能只是轉(zhuǎn)發(fā) classname 的問題
prop 到根元素，以便開發(fā)人員可以在他們的
中使用類選擇器
css.
如果你的組件與原生 html 元素具有相同的語義，你可以使用
來自 react 的 componentprops 類型，以確保所有相關(guān)的 props
可轉(zhuǎn)發(fā)。請(qǐng)記住省略任何您不希望用戶使用的道具
您的組件能夠覆蓋。
import { type componentprops } from 'react'
function submitbutton({ ...props }: omit<componentprops>, 'type'>) {
return <button type="submit"></button>
}
</componentprops>
登錄后復(fù)制
提供預(yù)定義類
對(duì)于包含一個(gè)或多個(gè)子元素的組件，開發(fā)者可能會(huì)
想要單獨(dú)設(shè)置每個(gè)元素的樣式。
支持這一點(diǎn)的一個(gè)策略是依賴
css 組合器。
例如，無頭畫廊組件的樣式可能如下：
/* root container */
.gallery {
}
/* gallery items container */
.gallery > ul {
}
/* gallery item */
.gallery > ul > li {
}
/* next and previous buttons */
.gallery button {
}
登錄后復(fù)制
但是這種方法產(chǎn)生了一個(gè)巨大的問題，因?yàn)楝F(xiàn)在
的內(nèi)部 html 結(jié)構(gòu)
該組件是其公共 api 的一部分。這會(huì)阻止您修改
稍后構(gòu)建，而不會(huì)破壞下游代碼。
更好的策略是為每個(gè)主要子元素預(yù)定義類。這邊
開發(fā)人員可以使用類選擇器，而不依賴于任何特定的 html
結(jié)構(gòu)：
.xyz-gallery {
}
.xyz-gallery-next-button {
}
.xyz-gallery-previous-button {
}
.xyz-gallery-items-container {
}
.xyz-gallery-item {
}
登錄后復(fù)制
記住給你的類添加前綴，這樣它們就不會(huì)與
沖突
開發(fā)者自己的風(fēng)格。
支持自定義布局
提供預(yù)定義的類可能是使開發(fā)人員能夠?qū)崿F(xiàn)的最快方法
設(shè)置你的組件的樣式。然而，這種方法的一個(gè)缺點(diǎn)是
html 結(jié)構(gòu)無法自定義。
這可能并不重要。畢竟，純 html 的使用方式已經(jīng)相當(dāng)靈活了
可以渲染。然而，有時(shí)開發(fā)人員會(huì)按順序獲取額外的 html
來完成某些設(shè)計(jì)。如果您查看幾乎所有的源代碼
網(wǎng)站，您可能會(huì)看到大量無語義的
元素，
其唯一目的是定義彈性或網(wǎng)格布局，直觀地對(duì)子項(xiàng)進(jìn)行分組
邊框內(nèi)的元素或創(chuàng)建新的堆疊上下文。
您可以通過將無頭組件拆分為
來支持此類用例
多個(gè)相關(guān)組件。這樣開發(fā)者就可以自由添加自己的
將元素布局到組件。例如，開發(fā)人員可以嵌入 next 和
自定義 flexbox 容器中圖庫示例中的上一個(gè)按鈕：
<gallery><galleryitems classname="gallery-items-container">
{data.map((item) => (
<galleryitem key="{item.id}">{item.content}</galleryitem>
))}
</galleryitems><div classname="gallery-buttons-container">
<gallerypreviousbutton><gallerynextbutton></gallerynextbutton></gallerypreviousbutton>
</div>
</gallery>
登錄后復(fù)制
.gallery-items-container {
}
.gallery-buttons-container {
display: flex;
gap: 0.5rem;
justify-content: flex-end;
}
登錄后復(fù)制
這些類型的組件通常使用
實(shí)現(xiàn)
要傳遞的上下文
它們之間的數(shù)據(jù)。他們需要更多的工作來設(shè)計(jì)、實(shí)施和
文檔。然而，它們所帶來的多功能性通常意味著額外的努力
值得。
允許組件被覆蓋
少數(shù)用例需要無頭組件管理布局
其子組件。一個(gè)例子可能是層次樹視圖
允許通過拖放對(duì)其項(xiàng)目進(jìn)行重新排序。另一個(gè)用例可能是
允許單頁應(yīng)用程序用 a 替換默認(rèn)的錨元素
有助于客戶端路由的自定義鏈接組件。
允許開發(fā)人員定義自定義布局的高級(jí)策略是
允許通過 props 覆蓋正在渲染的實(shí)際子組件：
<treeview nodes="{[...]}" components="{{" customrow customdragpreview:><div classname="drag-preview"></div>
}}
/>
</treeview>
登錄后復(fù)制
這使開發(fā)人員可以完全控制每個(gè)子項(xiàng)中渲染的內(nèi)容
組件，同時(shí)允許無頭組件管理其整體
結(jié)構(gòu).
您甚至可以允許開發(fā)人員自定義組件的根元素
通過道具。例如，這個(gè)按鈕組件允許開發(fā)者渲染它
作為其他東西：
import { type elementtype } from 'react'
function headlessbutton({ as, ...props }: { as?: elementtype }) {
const component = as ?? 'button'
return <component></component>
}
登錄后復(fù)制
例如，為了讓輔助技術(shù)將按鈕視為鏈接，
開發(fā)人員可以指定應(yīng)該使用錨元素來渲染
按鈕：
<headlessbutton as="a">Actually a link</headlessbutton>
登錄后復(fù)制
概括
無頭組件比不包含任何組件的組件要多得多
風(fēng)格。優(yōu)秀的無頭組件是完全可擴(kuò)展的，并允許開發(fā)人員
自定義整個(gè)內(nèi)部 html 結(jié)構(gòu)。
