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)}%
|
{ev.related_week_chg.toFixed(2)}%
|
||||||
</Badge>
|
</Badge>
|
||||||
)}
|
)}
|
||||||
<Button
|
<Box
|
||||||
size="xs"
|
as="span"
|
||||||
variant="ghost"
|
fontSize="xs"
|
||||||
colorScheme="red"
|
color="red.500"
|
||||||
|
cursor="pointer"
|
||||||
|
px={2}
|
||||||
|
py={1}
|
||||||
|
borderRadius="md"
|
||||||
|
_hover={{ bg: 'red.50' }}
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
@@ -142,7 +147,7 @@ const FollowingEventsMenu = memo(() => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
取消
|
取消
|
||||||
</Button>
|
</Box>
|
||||||
</HStack>
|
</HStack>
|
||||||
</HStack>
|
</HStack>
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
|
|||||||
@@ -113,10 +113,15 @@ const WatchlistMenu = memo(() => {
|
|||||||
item.current_price.toFixed(2) :
|
item.current_price.toFixed(2) :
|
||||||
(item.current_price || '-')}
|
(item.current_price || '-')}
|
||||||
</Text>
|
</Text>
|
||||||
<Button
|
<Box
|
||||||
size="xs"
|
as="span"
|
||||||
variant="ghost"
|
fontSize="xs"
|
||||||
colorScheme="red"
|
color="red.500"
|
||||||
|
cursor="pointer"
|
||||||
|
px={2}
|
||||||
|
py={1}
|
||||||
|
borderRadius="md"
|
||||||
|
_hover={{ bg: 'red.50' }}
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
@@ -124,7 +129,7 @@ const WatchlistMenu = memo(() => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
取消
|
取消
|
||||||
</Button>
|
</Box>
|
||||||
</HStack>
|
</HStack>
|
||||||
</HStack>
|
</HStack>
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
|
|||||||
Reference in New Issue
Block a user