fix: 修复 FeatureMenus 中的按钮嵌套警告
修复 React DOM 嵌套警告:<button> 不能作为 <button> 的后代 **问题描述** - MenuItem 组件渲染为 <button> 元素 - 在 MenuItem 内使用 Button 组件会导致 button-in-button 嵌套警告 **修复内容** 1. FollowingEventsMenu.js (lines 134-150) - 将"取消"按钮从 Button 组件改为 Box 组件 - 使用 Box + 样式模拟按钮外观和交互 2. WatchlistMenu.js (lines 116-132) - 同样将"取消"按钮改为 Box 组件 - 保持一致的样式和交互行为 **技术方案** - Box as="span" 渲染为行内元素 - 通过 cursor="pointer" + _hover 实现按钮交互 - 通过 color + borderRadius 实现按钮视觉效果 **测试** - ✅ 控制台无 DOM 嵌套警告 - ✅ 点击"取消"功能正常 - ✅ 悬停效果正常显示
This commit is contained in:
@@ -131,10 +131,15 @@ const FollowingEventsMenu = memo(() => {
|
||||
{ev.related_week_chg.toFixed(2)}%
|
||||
</Badge>
|
||||
)}
|
||||
<Button
|
||||
size="xs"
|
||||
variant="ghost"
|
||||
colorScheme="red"
|
||||
<Box
|
||||
as="span"
|
||||
fontSize="xs"
|
||||
color="red.500"
|
||||
cursor="pointer"
|
||||
px={2}
|
||||
py={1}
|
||||
borderRadius="md"
|
||||
_hover={{ bg: 'red.50' }}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
@@ -142,7 +147,7 @@ const FollowingEventsMenu = memo(() => {
|
||||
}}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
</Box>
|
||||
</HStack>
|
||||
</HStack>
|
||||
</MenuItem>
|
||||
|
||||
@@ -113,10 +113,15 @@ const WatchlistMenu = memo(() => {
|
||||
item.current_price.toFixed(2) :
|
||||
(item.current_price || '-')}
|
||||
</Text>
|
||||
<Button
|
||||
size="xs"
|
||||
variant="ghost"
|
||||
colorScheme="red"
|
||||
<Box
|
||||
as="span"
|
||||
fontSize="xs"
|
||||
color="red.500"
|
||||
cursor="pointer"
|
||||
px={2}
|
||||
py={1}
|
||||
borderRadius="md"
|
||||
_hover={{ bg: 'red.50' }}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
@@ -124,7 +129,7 @@ const WatchlistMenu = memo(() => {
|
||||
}}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
</Box>
|
||||
</HStack>
|
||||
</HStack>
|
||||
</MenuItem>
|
||||
|
||||
Reference in New Issue
Block a user