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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<Modal
|
{isOpen && (
|
||||||
isOpen={isOpen}
|
<Modal
|
||||||
onClose={onClose}
|
isOpen={isOpen}
|
||||||
size="full"
|
onClose={onClose}
|
||||||
scrollBehavior="inside"
|
size="full"
|
||||||
>
|
scrollBehavior="inside"
|
||||||
|
>
|
||||||
<ModalOverlay />
|
<ModalOverlay />
|
||||||
<ModalContent maxW="1400px" m={4}>
|
<ModalContent maxW="1400px" m={4}>
|
||||||
<ModalHeader
|
<ModalHeader
|
||||||
@@ -840,14 +841,16 @@ const ConceptTimelineModal = ({
|
|||||||
</ModalFooter>
|
</ModalFooter>
|
||||||
</ModalContent>
|
</ModalContent>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* 研报全文Modal */}
|
{/* 研报全文Modal */}
|
||||||
<Modal
|
{isReportModalOpen && (
|
||||||
isOpen={isReportModalOpen}
|
<Modal
|
||||||
onClose={() => setIsReportModalOpen(false)}
|
isOpen={isReportModalOpen}
|
||||||
size="4xl"
|
onClose={() => setIsReportModalOpen(false)}
|
||||||
scrollBehavior="inside"
|
size="4xl"
|
||||||
>
|
scrollBehavior="inside"
|
||||||
|
>
|
||||||
<ModalOverlay />
|
<ModalOverlay />
|
||||||
<ModalContent>
|
<ModalContent>
|
||||||
<ModalHeader bg="green.500" color="white">
|
<ModalHeader bg="green.500" color="white">
|
||||||
@@ -919,14 +922,16 @@ const ConceptTimelineModal = ({
|
|||||||
</ModalFooter>
|
</ModalFooter>
|
||||||
</ModalContent>
|
</ModalContent>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* 新闻全文Modal */}
|
{/* 新闻全文Modal */}
|
||||||
<Modal
|
{isNewsModalOpen && (
|
||||||
isOpen={isNewsModalOpen}
|
<Modal
|
||||||
onClose={() => setIsNewsModalOpen(false)}
|
isOpen={isNewsModalOpen}
|
||||||
size="4xl"
|
onClose={() => setIsNewsModalOpen(false)}
|
||||||
scrollBehavior="inside"
|
size="4xl"
|
||||||
>
|
scrollBehavior="inside"
|
||||||
|
>
|
||||||
<ModalOverlay />
|
<ModalOverlay />
|
||||||
<ModalContent>
|
<ModalContent>
|
||||||
<ModalHeader bg="blue.500" color="white">
|
<ModalHeader bg="blue.500" color="white">
|
||||||
@@ -989,6 +994,7 @@ const ConceptTimelineModal = ({
|
|||||||
</ModalFooter>
|
</ModalFooter>
|
||||||
</ModalContent>
|
</ModalContent>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user