首页
Javascript
Html
Css
Node.js
Electron
移动开发
小程序
工具类
服务端
浏览器相关
前端收藏
其他
关于
公司注册

ant.design v5 and 中如何在class中使用umijs的useModel调用initialState

2020年12月29日 发布 阅读(8311) 作者：Jerman

ant.design pro升级v5后，没有再使用dva，而umijs的useModel貌似只能在函数组件中使用。如果要把所有class组件改成函数组件，那工程量真的不是一般的大。那class组件中怎么调用初始的initialState呢？

方法还是有的，造一个类似dva``connect的函数，每个地方都要用，那就放在window下了

  1. // src/app.tsx
  2. import { useModel } from 'umi';
  3. // 全局连接Model
  4. window.connectModel = (key, name) => {
  5.   return (WrappedComponent) => {
  6.     return (props) => {
  7.       const model = useModel(name);
  8.       const data = { [key]: model };
  9.       return <WrappedComponent {...props} {...data} />;
  10.     };
  11.   };
  12. };

class组件中使用,@window.connectModel('pageData', '@@initialState')和class中不能添加任何其他代码

  1. // @是es7添加的修饰器
  2. @window.connectModel('pageData', '@@initialState')
  3. class Index extends PureComponent {
  4.     ...
  5.     componentDidMount() {
  6.         const { pageData } = this.props;
  7.         const apiAuth = pageData?.initialState?.authList;
  8.         ...
  9.     }
  10. }
版权声明：本站文章除特别声明外，均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议，如需转载，请注明出处

© 2018 IMQIANDUAN.COM 粤ICP备18143223号