umi icon indicating copy to clipboard operation
umi copied to clipboard

[Feature Request]在class component中使用usemodel,用injectModel 代替 connect,或者并存

Open komagic opened this issue 2 years ago • 2 comments

Background

想页面用class component,方便页面继承;而具体模块用function component。在class component 中使用usmodel的能力;

本来connect就是干这个事,但是新手可能不能直观理解connect的作用。用injectModel命名可能更能表达相似的意义

Proposal

在class component 中使用usmodel到的能力,方便新手在不同组件里使用qiankun 和umi 的useModel能力

Additional context

类似一个高阶函数,ts可以用装饰器

 function injectModels(...models: string[]) {
  return (WrappedComponent) => {
    return (props) => {
      const data = {};
      models.forEach((modelName) => {
        return data[modelName] = useModel(modelName);
      });
      return <WrappedComponent {...props} {...data} />;
    };
  };
}


export default injectModels;

komagic avatar Sep 11 '22 04:09 komagic

主要是方便,比如,同时兼容一些老项目风格代码

@injectModels('@@initialState','@@qiankunStateFromMaster')
class Page extends ....

componentDidMount(){
const user = this.props['@@initialState'].user;
...
}

komagic avatar Sep 11 '22 04:09 komagic

connect比较既好又烦的地方是考虑了命名冲突等很多能力,但是这要在组件里写一个变量名字两遍,很麻烦。 东西先用起来简单,好用,然后别人才会学习相关的延伸能力。

connect我感觉可以简化,有冲突的时候报个错,推荐个推荐写法就好了

komagic avatar Sep 11 '22 05:09 komagic