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

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

2020年12月29日 发布 阅读(2848) 作者: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 国际 许可协议,如需转载,请注明出处