React 独立组件间共享 Mixins ⚠

不提倡使用,提倡使用HOC高阶组件

  • ES6不支持Mixin,所以需要相插件来进行支持,npm install --save react-mixin@2

  • 测试一下Mixin是如何运行的

  • src/js/components下创建mixins.js

const MixinLog = {
    componentDidMount(){
    console.log("MixinLog componentDidMount");//查看Mixin生命周期
    }
    ,log(){console.log("tyrmars")}
};

export default MixinLog//向外输出
  • 在bodyIndex.js中

import React from 'react';
import ReactDOM from 'react-dom';
import BodyChild from './bodychild';
import ReactMixin from 'react-mixin';
import MixinLog from './mixins';
changeUserInfo() {
    MixinLog.log();
};
render() {
  return(
    <input id="submitButton" ref="submitButton" type="button" value="提交" onClick{this.changeUserInfo.bind(this, 99)}/>
  )
}
BodyIndex.defaultProps = defaultProps;
ReactMixin(BodyIndex.propTypes,MixinLog);
  • 点击页面上的提交按钮🔘在console.log中会出现MixinLog componentDidMounttyrmars

最后更新于