react+mobx 编写withMessage 高阶组建

监听store中的amsg属性的变化来调用 提示框

withMessage

// withComponents/withMessage.js

import React,{ Component } from "react";
import LightTip from "../components/lightTip";
import { set } from "mobx";

export default function withMessage(storeName,key = "amsg") {
  if (!storeName) return console.error(`必须输入一个查询数据的store`);
  return function(Target) {
    return class WithMessage extends Component {
      componentWillMount() {
        let msg = this.props[storeName][key];
        if (msg === undefined) {
          set(this.props[storeName],{
            [key]: "",});
        }
      }
      close = () => {
        set(this.props[storeName],{
          [key]: "",});
      };
      render() {
        return (
          <>
            <LightTip msg={this.props[storeName][key]} onClose={this.close} />
            <Target {...this.props} />
          </>
        );
      }
    };
  };
}

使用

import React,{ Component } from "react";
import { observer,inject } from "mobx-react";
import withMessage from "../withComponents/withMessage";

const INDEXSTORE = "indexStore";

@inject(INDEXSTORE)
@observer
@withMessage(INDEXSTORE)
class Test extends Component {
  render() {
    const { indexStore } = this.props;
    return (
      <button
        onClick={() => {
          indexStore.amsg = "error";
        }}
      >
        click me
      </button>
    );
  }
}

export default Test;