![\"\u5c01\u9762\u4fe1\u606f\u56fe\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260928210842-6abad75a39cb6.webp\")
<\/p>\n<\/p>\n
\u5728\u7f8e\u9662\u4f20\u7edf\u6728\u4f5c\u4e0e\u7a7a\u95f4\u6784\u9020\u5de5\u574a\u91cc，\u8001\u5e08\u66fe\u53d1\u7ed9\u6bcf\u4f4d\u540c\u5b66\u4e00\u5957\u672a\u7ecf\u6253\u78e8\u7684\u4f20\u7edf\u516d\u67f1**\u201c\u9c81\u73ed\u9501（\u53c8\u79f0\u5b54\u660e\u9501 \/ Luban Lock）\u201d**\u3002<\/p>\n
\u6563\u843d\u5728\u5de5\u4f5c\u53f0\u4e0a\u7684，\u662f\u516d\u6839\u957f\u5bbd\u5b8c\u5168\u76f8\u540c\u7684\u7ea2\u6728\u65b9\u6761\u3002<\/p>\n
\u521d\u770b\u4e4b\u4e0b，\u8fd9\u516d\u6839\u6728\u6761\u5f62\u6001\u5404\u5f02\u3001\u751a\u81f3\u663e\u5f97\u6709\u4e9b\u6b8b\u7f3a\u7834\u635f：\u6bcf\u4e00\u6839\u6728\u6761\u7684\u4e2d\u95f4\u90e8\u5206，\u90fd\u88ab\u9c81\u73ed\u5228\u548c\u96d5\u523b\u5200\u51ff\u51fa\u4e86\u6df1\u6d45\u4e0d\u4e00\u7684\u65b9\u5f62\u51f9\u69fd\u3001\u51f8\u53f0\u4e0e\u7f3a\u53e3\u2014\u2014\u8fd9\u5c31\u662f\u4e2d\u56fd\u53e4\u4ee3\u5efa\u7b51\u4e0e\u5bb6\u5177\u5de5\u827a\u4e2d\u6d41\u4f20\u6570\u5343\u5e74\u7684\u6700\u9ad8\u667a\u6167\u2014\u2014\u201c\u69ab\u536f（Mortise and Tenon）\u201d\u3002<\/p>\n
\u5728\u7ec4\u88c5\u9c81\u73ed\u9501\u7684\u8fc7\u7a0b\u4e2d，\u4e0d\u7528\u4e00\u9897\u94c1\u9489，\u4e0d\u7528\u4e00\u9897\u87ba\u4e1d，\u4e5f\u4e0d\u6d82\u62b9\u4e00\u6ef4\u5316\u5b66\u80f6\u6c34：<\/p>\n
\u53e4\u8bed\u6709\u4e91：\u201c\u69ab\u536f\u4e07\u5e94，\u9634\u9633\u4e92\u751f，\u6263\u7ed3\u81ea\u575a，\u4e0d\u7528\u9489\u80f6\u800c\u767e\u4ee3\u4e0d\u673d\u3002\u201d<\/p>\n
\u516d\u6839\u6728\u6761，\u6bcf\u4e00\u5904\u7684\u51f8\u8d77（\u69ab）\u90fd\u7cbe\u51c6\u5bf9\u5e94\u7740\u53e6\u4e00\u5904\u7684\u51f9\u9677（\u536f），\u5f7c\u6b64\u4e4b\u95f4\u65e2\u4fdd\u6301\u7740\u72ec\u7acb\u7684\u7269\u7406\u8fb9\u754c，\u53c8\u5728\u5951\u7ea6\u54ac\u5408\u540e\u5c55\u73b0\u51fa\u60ca\u4eba\u7684\u7cfb\u7edf\u5b8c\u6574\u6027\u3002<\/p>\n
\u591a\u5e74\u4e4b\u540e，\u5f53\u6211\u5728\u5927\u524d\u7aef\u67b6\u6784\u4e2d\u4e3a\u4e00\u5957\u4f01\u4e1a\u7ea7\u8bbe\u8ba1\u7cfb\u7edf\u8bbe\u8ba1\u590d\u5408\u7ec4\u4ef6\u63a5\u53e3\u5951\u7ea6（Compound Component Contract & Inversion of Control） \u65f6，\u6211\u603b\u4f1a\u60f3\u8d77\u5de5\u4f5c\u53f0\u4e0a\u90a3\u4e00\u76cf\u4e25\u4e1d\u5408\u7f1d\u7684\u7ea2\u6728\u9c81\u73ed\u9501\u3002<\/p>\n
\u5728\u5f88\u591a\u7c97\u7cd9\u7684\u524d\u7aef\u7ec4\u4ef6\u8bbe\u8ba1\u4e2d，\u7ec4\u4ef6\u63a5\u53e3\u5f80\u5f80\u5145\u65a5\u7740\u4e25\u91cd\u7684\u201c\u7528\u94c1\u9489\u786c\u7838（Prop Drilling & Monolithic Bloat）\u201d：<\/p>\n
\u5c06\u4f20\u7edf\u9c81\u73ed\u9501\u201c\u51f9\u51f8\u54ac\u5408\u3001\u63a7\u5236\u53cd\u8f6c\u3001\u9501\u82af\u81ea\u9501\u201d\u7684\u69ab\u536f\u5951\u7ea6\u54f2\u5b66\u5f15\u5165\u73b0\u4ee3\u524d\u7aef\u7ec4\u4ef6\u63a5\u53e3\u8bbe\u8ba1，\u6211\u4eec\u5c31\u80fd\u7528 React Context \/ Vue Provide-Inject \u6253\u9020\u51fa\u5982\u53e4\u5178\u69ab\u536f\u822c\u65e2\u7075\u6d3b\u591a\u53d8\u3001\u53c8\u4e25\u5bc6\u81ea\u6d3d\u7684\u590d\u5408\u7ec4\u4ef6\u7cfb\u7edf\u3002<\/p>\n
\u4e00\u4e2a\u5177\u5907\u69ab\u536f\u7ea7\u5de5\u4e1a\u7f8e\u611f\u7684\u590d\u5408\u7ec4\u4ef6\u7cfb\u7edf，\u5fc5\u987b\u5c06\u5e9e\u5927\u7684\u63a7\u5236\u6743\u4e0b\u653e，\u62c6\u89e3\u4e3a\u4e00\u7ec4\u62e5\u6709\u660e\u786e\u51f9\u51f8\u5951\u7ea6\u7684\u5b50\u7ec4\u4ef6：<\/p>\n
\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
\n \u2502 \u7236\u7ea7\u5916\u58f3\u5bb9\u5668: <Select.Root> \u2502
\n \u2502 (\u76f8\u5f53\u4e8e\u9c81\u73ed\u9501\u7684\u57fa\u5e95\u62b1\u67f1\u4e0e\u7acb\u67f1) \u2502
\n \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518
\n \u2502
\n \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
\n \u25bc \u25bc \u25bc
\n[\u89e6\u53d1\u5668\u69ab\u69fd: <Select.Trigger>] [\u4e0b\u62c9\u6d6e\u5c42\u69ab\u69fd: <Select.Content>] [\u9009\u9879\u54ac\u5408\u5355\u5143: <Select.Item>]
\n – \u627f\u8f7d\u70b9\u51fb\u5c55\u5f00\u903b\u8f91 – \u627f\u8f7d Portal \u4e0e\u52a8\u753b\u6302\u8f7d – \u627f\u8f7d\u6570\u636e\u9009\u4e2d\u4e0e\u952e\u76d8\u7126\u70b9
\n – \u4e0e Root \u5171\u4eab Context \u51f9\u51f8\u5951\u7ea6 – \u4e0e Trigger \u4fdd\u6301\u7269\u7406\u5bf9\u9f50 – \u4e25\u4e1d\u5408\u7f1d\u54ac\u5165 Content \u69fd\u4f4d！🔥<\/p>\n
\/\/ compound-select-craft.tsx
\nimport React, { createContext, useContext, useState, useId } from 'react';<\/p>\n
\/\/ 1. \u69ab\u536f\u9690\u5f0f\u5951\u7ea6 Context (\u76f8\u5f53\u4e8e\u6728\u6761\u5185\u90e8\u7684\u51f9\u51f8\u51e0\u4f55\u89c4\u683c)
\ninterface LubanSelectContextType {
\n isOpen: boolean;
\n setIsOpen: (open: boolean) => void;
\n selectedValue: string | null;
\n onSelect: (val: string) => void;
\n baseId: string;
\n}<\/p>\n
const LubanSelectContext = createContext<LubanSelectContextType | null>(null);<\/p>\n
function useLubanContract() {
\n const ctx = useContext(LubanSelectContext);
\n if (!ctx) throw new Error('🚨 [\u9c81\u73ed\u69ab\u536f\u5951\u7ea6\u5f02\u5e38] \u5b50\u7ec4\u4ef6\u5fc5\u987b\u5305\u88f9\u5728 <Select.Root> \u5185\u90e8！');
\n return ctx;
\n}<\/p>\n
\/\/ 2. \u6839\u5bb9\u5668 (Root \/ \u6574\u4f53\u7a7a\u95f4\u6846\u67b6)
\nexport const SelectRoot: React.FC<{
\n children: React.ReactNode;
\n defaultValue?: string;
\n onValueChange?: (val: string) => void;
\n}> = ({ children, defaultValue = null, onValueChange }) => {
\n const [isOpen, setIsOpen] = useState(false);
\n const [selectedValue, setSelectedValue] = useState<string | null>(defaultValue);
\n const baseId = useId();<\/p>\n
const handleSelect = (val: string) => {
\n setSelectedValue(val);
\n setIsOpen(false);
\n onValueChange?.(val);
\n };<\/p>\n
return (
\n <LubanSelectContext.Provider
\n value={{ isOpen, setIsOpen, selectedValue, onSelect: handleSelect, baseId }}
\n >
\n <div className="relative inline-block w-full max-w-xs">{children}<\/div>
\n <\/LubanSelectContext.Provider>
\n );
\n};<\/p>\n
\/\/ 3. \u89e6\u53d1\u5668 (Trigger \/ \u9501\u82af\u7b2c\u4e00\u67f1)
\nexport const SelectTrigger: React.FC<{ children: React.ReactNode; placeholder?: string }> = ({
\n children,
\n placeholder = '\u8bf7\u9009\u62e9\u914d\u7f6e\u9879…',
\n}) => {
\n const { isOpen, setIsOpen, selectedValue } = useLubanContract();<\/p>\n
return (
\n <button
\n type="button"
\n onClick={() => setIsOpen(!isOpen)}
\n className="w-full flex items-center justify-between px-4 py-3 bg-slate-900 border border-slate-800 rounded-2xl text-white text-xs font-semibold shadow-lg hover:border-indigo-500\/50 transition-all outline-none focus:ring-2 focus:ring-indigo-500"
\n >
\n <span>{selectedValue ? children : <span className="text-slate-500">{placeholder}<\/span>}<\/span>
\n <span className={`text-slate-400 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}>\u25bc<\/span>
\n <\/button>
\n );
\n};<\/p>\n
\/\/ 4. \u4e0b\u62c9\u5185\u5bb9\u533a (Content \/ \u6d6e\u52a8\u69ab\u69fd)
\nexport const SelectContent: React.FC<{ children: React.ReactNode }> = ({ children }) => {
\n const { isOpen } = useLubanContract();
\n if (!isOpen) return null;<\/p>\n
return (
\n <div className="absolute left-0 right-0 mt-2 p-1.5 bg-slate-950 border border-slate-800 rounded-2xl shadow-2xl z-50 animate-in fade-in zoom-in-95 duration-150 space-y-1">
\n {children}
\n <\/div>
\n );
\n};<\/p>\n
\/\/ 5. \u9009\u9879\u5355\u5143 (Item \/ \u4e25\u4e1d\u5408\u7f1d\u7684\u54ac\u5408\u69ab\u5934)
\nexport const SelectItem: React.FC<{ value: string; children: React.ReactNode }> = ({
\n value,
\n children,
\n}) => {
\n const { selectedValue, onSelect } = useLubanContract();
\n const isSelected = selectedValue === value;<\/p>\n
return (
\n <div
\n onClick={() => onSelect(value)}
\n className={`flex items-center justify-between px-3.5 py-2.5 rounded-xl text-xs font-medium cursor-pointer select-none transition-colors
\n ${isSelected ? 'bg-indigo-600 text-white font-bold' : 'text-slate-300 hover:bg-slate-900 hover:text-white'}`}
\n >
\n <span>{children}<\/span>
\n {isSelected && <span className="text-white text-xs">\u2713<\/span>}
\n <\/div>
\n );
\n};<\/p>\n
\/\/ \u547d\u540d\u7a7a\u95f4\u5bfc\u51fa
\nexport const Select = {
\n Root: SelectRoot,
\n Trigger: SelectTrigger,
\n Content: SelectContent,
\n Item: SelectItem,
\n};<\/p>\n
\/\/ App.tsx
\nexport const DemoApp = () => {
\n return (
\n <Select.Root onValueChange={(val) => console.log('\u9009\u4e2d\u9879:', val)}>
\n <Select.Trigger placeholder="\u6311\u9009\u69ab\u536f\u89c4\u683c…" \/>
\n <Select.Content>
\n <Select.Item value="six-pole">\u7ecf\u5178\u516d\u67f1\u7ea2\u6728\u9c81\u73ed\u9501<\/Select.Item>
\n <Select.Item value="twelve-pole">\u5341\u4e8c\u67f1\u5929\u5706\u5730\u65b9\u9501<\/Select.Item>
\n <div className="h-px bg-white\/10 my-1"><\/div> {\/* \u81ea\u7531\u63d2\u5165\u4efb\u610f\u81ea\u5b9a\u4e49 UI！ *\/}
\n <Select.Item value="custom-spec">\u5b9a\u5236\u975e\u6807\u69ab\u536f\u7ed3\u6784<\/Select.Item>
\n <\/Select.Content>
\n <\/Select.Root>
\n );
\n};<\/p>\n
\u4e00\u76cf\u9c81\u73ed\u9501\u7684\u575a\u4e0d\u53ef\u6467，\u6e90\u4e8e\u516d\u6839\u6728\u6761\u5728\u51f9\u51f8\u54ac\u5408\u4e2d\u8fbe\u6210\u7684\u9ad8\u5ea6\u4e92\u4fe1\u4e0e\u63a7\u5236\u53cd\u8f6c；\u4e00\u5957\u524d\u7aef\u7ec4\u4ef6\u7684\u5386\u4e45\u5f25\u65b0，\u6e90\u4e8e\u5de5\u7a0b\u5e08\u7528\u6e05\u6670\u7684\u4e0a\u4e0b\u6587\u5951\u7ea6\u53d6\u4ee3\u81c3\u80bf\u6df7\u4e71\u7684\u53c2\u6570\u5806\u780c\u3002\u629b\u5f03\u7c97\u66b4\u751f\u786c\u7684\u5355\u4f53\u80d6\u7ec4\u4ef6，\u8df5\u884c\u5982\u4f20\u7edf\u69ab\u536f\u822c\u4e25\u4e1d\u5408\u7f1d\u7684\u590d\u5408\u7ec4\u4ef6\u8bbe\u8ba1\u54f2\u5b66，\u4f60\u7684\u4ee3\u7801\u5e93\u624d\u80fd\u5728\u9762\u5bf9\u5343\u53d8\u4e07\u5316\u7684\u4e1a\u52a1\u7ec4\u5408\u8bc9\u6c42\u65f6，\u5c55\u73b0\u51fa\u5982\u4f20\u4e16\u540d\u6728\u822c\u4e0d\u7528\u9489\u80f6\u5374\u767e\u4ee3\u4e0d\u673d\u7684\u4ece\u5bb9\u79e9\u5e8f\u4e4b\u7f8e\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u4e00\u76cf\u69ab\u536f\u9c81\u73ed\u9501\u7684\u4e25\u4e1d\u5408\u7f1d\u4e0e\u524d\u7aef\u7ec4\u4ef6\u63a5\u53e3\u5951\u7ea6\u8bbe\u8ba1\u5728\u7f8e\u9662\u4f20\u7edf\u6728\u4f5c\u4e0e\u7a7a\u95f4\u6784\u9020\u5de5\u574a\u91cc，\u8001\u5e08\u66fe\u53d1\u7ed9\u6bcf\u4f4d\u540c\u5b66\u4e00\u5957\u672a\u7ecf\u6253\u78e8\u7684\u4f20\u7edf\u516d\u67f1**\u201c\u9c81\u73ed\u9501（\u53c8\u79f0\u5b54\u660e\u9501 \/ Luban Lock）\u201d**\u3002
\n\u6563\u843d\u5728\u5de5\u4f5c\u53f0\u4e0a\u7684，\u662f\u516d\u6839\u957f\u5bbd\u5b8c\u5168\u76f8\u540c\u7684\u7ea2\u6728\u65b9\u6761\u3002
\n\u521d\u770b\u4e4b\u4e0b，\u8fd9\u516d\u6839\u6728\u6761\u5f62\u6001\u5404\u5f02\u3001\u751a\u81f3\u663e\u5f97\u6709\u4e9b\u6b8b\u7f3a\u7834\u635f：\u6bcf\u4e00\u6839\u6728\u6761\u7684\u4e2d\u95f4\u90e8\u5206，\u90fd\u88ab\u9c81\u73ed\u5228\u548c\u96d5\u523b\u5200\u51ff\u51fa\u4e86\u6df1\u6d45\u4e0d\u4e00\u7684\u65b9\u5f62\u51f9\u69fd\u3001\u51f8\u53f0\u4e0e\u7f3a\u53e3\u2014\u2014\u8fd9\u5c31\u662f\u4e2d\u56fd\u53e4\u4ee3\u5efa\u7b51\u4e0e<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[66,573,594,50,87],"topic":[],"class_list":["post-110616","post","type-post","status-publish","format-standard","hentry","category-server","tag-ai","tag-css","tag-web","tag-50","tag-87"],"yoast_head":"\n