search

CJY0208 / react-router-cache-route

Route with cache for react-router V5 like <keep-alive /> in Vue
https://www.npmjs.com/package/react-router-cache-route
MIT License
1.15k stars 111 forks source link

How to turn off the display:none of the component #162

Closed mingaaaaa closed 1 year ago

mingaaaaa commented 1 year ago

behavior just control component container,but component is set display:none !important,when my component is iframe,cache is meaningless because component is set display:none !important.How to turn off the display:none of the component?

CJY0208 commented 1 year ago

不太理解你说的 “无意义” 是什么意思，目前 cache-route 没有给 display: none 加上 !important，想要关闭这个行为，使用 behavior 应该是可以做到的

mingaaaaa commented 1 year ago

假设有个组件A，使用了CacheSwitch和CacheRoute后，组件A外面会新增一层div容器，behavior等设置都是针对这个容器的，当我切换到其他页面时被缓存组件A会被一段js设置一个“display:none !important”，但是目前我的组件A是有一个frame的，如果组件A设置了display:none那么对于iframe来说缓存就是没有意义的了因为iframe会重新加载。我看了下源码但是我没有找到设置组件为display:none的代码，我想请问一下关于缓存组件被隐藏时做的一些操作的代码是在哪几行，因为源码我看的并不是很懂，希望得到您的回复：）

CJY0208 commented 1 year ago

有尝试使用 behavior 属性吗？目前隐藏组件的行为就是通过这个属性配置的，behavior 的默认值是 behavior={cached => cached ? { style: { display: "none" }} : undefined}

如果你需要调整行为，可以改成 behavior={cached => cached ? { style: { width: 0, height: 0 }} : undefined}

mingaaaaa commented 1 year ago

使用了，正如我上面说的一样，behavior属性作用在组件A的外部容器上，但是组件A还是被设置了display: "none",现在看来应该不是CacheRoute设置的，非常感谢您的回复，祝您生活愉快：）

mingaaaaa commented 1 year ago

您好，我找到原因了，是react-dom给出的行为if (typeof style.setProperty === 'function') {style.setProperty('display', 'none', 'important');},非常感谢您热情的回复，希望没有给您带来困扰。：D