53 lines
1.5 KiB
YAML
53 lines
1.5 KiB
YAML
---
|
||
id: radix-trigger-formcontrol-nesting
|
||
language: tsx
|
||
files:
|
||
- src/**/*.tsx
|
||
message: |
|
||
❌ 检测到危险的 Slot 嵌套：Radix UI Trigger (asChild) 内包裹 FormControl
|
||
|
||
问题代码：
|
||
<PopoverTrigger asChild>
|
||
<FormControl> ← 会导致点击事件失效
|
||
<Button>...</Button>
|
||
</FormControl>
|
||
</PopoverTrigger>
|
||
|
||
正确写法：
|
||
<PopoverTrigger asChild>
|
||
<Button>...</Button> ← 直接使用 Button
|
||
</PopoverTrigger>
|
||
|
||
原因：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$"
|