iframe 会刷新页面

[erlei22]

https://codesandbox.io/s/umi-keep-alive-tabs-demo-forked-teqs5?file=/src/pages/setting.js

[CJY0208]

iframe 的问题已经记录过了，不过没找到解决方式，原因是对 iframe 标签进行的 dom 移位操作一律会引起刷新，但 keep-alive 的工作方式是必须进行 dom 移位...

[chj-damon]

没看懂，刷新页面是指什么？

[CJY0208]

@chj-damon 就是 iframe 内部会执行 location.reload() 之类的操作
只要 iframe 的 dom 节点位置挪了一下都会触发，reload 后内部的状态就丢掉了

[Aaron52077]

@CJY0208 https://wuli-admin.gitee.io/react-mat-pro/#/dashboard 利用react-activation + ReactDom.createPortal 实现的缓存

[CJY0208]

@CJY0208 https://github.com/CJY0208)https://wuli-admin.gitee.io/react-antd-template/#/dashboard 利用react-activation + ReactDom.createPortal 实现的缓存

没看明白，似乎没有发生 dom 移位，感觉不一定是 activation 在生效

[Aaron52077]

@CJY0208 https://wuli-admin.gitee.io/react-antd-template/#/dashboard 利用react-activation + ReactDom.createPortal 实现的缓存

没看明白，似乎没有发生 dom 移位，感觉不一定是 activation 在生效

keepAlive嵌入outlet缓存的name，只是把iframe组件通过createPortal转移到keepAlive外层

[CJY0208]

@Aaron52077 也就是需要对 keep alive 内的 iframe 做手动处理

[Aaron52077]

@Aaron52077 也就是需要对 keep alive 内的 iframe 做手动处理

无需处理

[CJY0208]

代码能看一下嘛？我看看有没有可能搬到 activation 内部

[Aaron52077]

代码能看一下嘛？我看看有没有可能搬到 activation 内部

import React, { CSSProperties, useMemo } from "react";
import { useLocation, useOutlet, useParams } from "react-router-dom";
import { Layout } from "antd";
import KeepAlive from "react-activation";
import { MAT_KEEP_ALIVE } from "@/components/keep-alive/constant";
import { useSelector } from "react-redux";
import { getAppStoreState } from "@/store/getters";

interface PageContentProps {
  style?: CSSProperties;
}

const MatPageContent: React.FC<PageContentProps> = ({ style }) => {
  const { currentRoute } = useSelector(getAppStoreState);
  const { pathname } = useLocation();
  const params = useParams();
  const outlet = useOutlet();
  const dispalyIframe = useMemo(() => (params.frameId ? "block" : "none"), [params.frameId]);

  return (
    <Layout.Content className="mat-layout-content" style={{ ...style }}>
      <KeepAlive name={currentRoute.id} id={pathname} when={[currentRoute.keepAlive, true]}>
        {outlet}
      </KeepAlive>

      <div id={MAT_KEEP_ALIVE} style={{ display: dispalyIframe }} />
    </Layout.Content>
  );
};

export default MatPageContent;

[AndyJinSS]

@CJY0208 https://wuli-admin.gitee.io/react-mat-pro/#/dashboard 利用react-activation + ReactDom.createPortal 实现的缓存

请问React Mat Pro有开源吗？

[Aaron52077]

@CJY0208 https://wuli-admin.gitee.io/react-mat-pro/#/dashboard 利用react-activation + ReactDom.createPortal 实现的缓存

请问React Mat Pro有开源吗？

暂时没有，还在完善一些功能

[Aaron52077]

@CJY0208 https://wuli-admin.gitee.io/react-mat-pro/#/dashboard 利用react-activation + ReactDom.createPortal 实现的缓存

请问React Mat Pro有开源吗？

https://gitee.com/wuli-admin/angular-mat-pro/tree/react18/

[ALongLi]

createPortal的实现能看下吗

[zhangpanjun]

这个问题有后续吗？有解决demo吗 @CJY0208

[sodagreen574]

@CJY0208 https://wuli-admin.gitee.io/react-mat-pro/#/dashboard 利用react-activation + ReactDom.createPortal 实现的缓存

请问React Mat Pro有开源吗？

https://gitee.com/wuli-admin/angular-mat-pro/tree/react18/

https://wuli-admin.gitee.io/react-mat-pro/ 老哥，，这个项目方便开源吗