fix: 优化概念中心时间轴弹窗关闭行为,使用条件渲染
问题描述:
- 点击关闭按钮后,弹窗未完全关闭
- 可能存在 DOM 残留或状态问题
优化方案:
- 使用条件渲染替代 isOpen 属性控制
- 当状态为 false 时,Modal 组件完全从 DOM 中卸载
- 确保每次打开都是全新的状态
修改内容:
1. 主时间轴 Modal:添加 {isOpen && <Modal>...</Modal>} 条件渲染
2. 研报详情 Modal:添加 {isReportModalOpen && <Modal>...</Modal>} 条件渲染
3. 新闻详情 Modal:添加 {isNewsModalOpen && <Modal>...</Modal>} 条件渲染
优化效果:
- 弹窗关闭后组件完全卸载,避免残留
- 减少不必要的 DOM 节点,提升性能
- 每次打开都是全新的组件实例
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -406,12 +406,13 @@ const ConceptTimelineModal = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
size="full"
|
||||
scrollBehavior="inside"
|
||||
>
|
||||
{isOpen && (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
size="full"
|
||||
scrollBehavior="inside"
|
||||
>
|
||||
<ModalOverlay />
|
||||
<ModalContent maxW="1400px" m={4}>
|
||||
<ModalHeader
|
||||
@@ -840,14 +841,16 @@ const ConceptTimelineModal = ({
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
)}
|
||||
|
||||
{/* 研报全文Modal */}
|
||||
<Modal
|
||||
isOpen={isReportModalOpen}
|
||||
onClose={() => setIsReportModalOpen(false)}
|
||||
size="4xl"
|
||||
scrollBehavior="inside"
|
||||
>
|
||||
{isReportModalOpen && (
|
||||
<Modal
|
||||
isOpen={isReportModalOpen}
|
||||
onClose={() => setIsReportModalOpen(false)}
|
||||
size="4xl"
|
||||
scrollBehavior="inside"
|
||||
>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader bg="green.500" color="white">
|
||||
@@ -919,14 +922,16 @@ const ConceptTimelineModal = ({
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
)}
|
||||
|
||||
{/* 新闻全文Modal */}
|
||||
<Modal
|
||||
isOpen={isNewsModalOpen}
|
||||
onClose={() => setIsNewsModalOpen(false)}
|
||||
size="4xl"
|
||||
scrollBehavior="inside"
|
||||
>
|
||||
{isNewsModalOpen && (
|
||||
<Modal
|
||||
isOpen={isNewsModalOpen}
|
||||
onClose={() => setIsNewsModalOpen(false)}
|
||||
size="4xl"
|
||||
scrollBehavior="inside"
|
||||
>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader bg="blue.500" color="white">
|
||||
@@ -989,6 +994,7 @@ const ConceptTimelineModal = ({
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user