---
id: radix-trigger-formcontrol-nesting
language: tsx
files:
- src/**/*.tsx
message: |
❌ 检测到危险的 Slot 嵌套:Radix UI Trigger (asChild) 内包裹 FormControl
问题代码:
← 会导致点击事件失效
正确写法:
← 直接使用 Button
原因:FormControl 和 Trigger 都使用 Radix UI 的 Slot 机制,双层嵌套会导致:
- ref 传递链断裂
- 点击事件丢失
- 内部组件无法交互
FormControl 只应该用于原生表单控件(Input, Textarea, Select),不要用于触发器按钮。
severity: error
rule:
kind: jsx_element
all:
# 开始标签需要满足的条件
- has:
kind: jsx_opening_element
all:
# 匹配所有 Radix UI 的 Trigger 组件
- has:
field: name
regex: "^(Popover|Dialog|DropdownMenu|AlertDialog|HoverCard|Menubar|NavigationMenu|ContextMenu|Tooltip)Trigger$"
# 必须有 asChild 属性
- has:
kind: jsx_attribute
has:
kind: property_identifier
regex: "^asChild$"
# 直接子元素包含 FormControl
- has:
kind: jsx_element
has:
kind: jsx_opening_element
has:
field: name
regex: "^FormControl$"