独立组件间共享 Mixins

独立组件间共享 Mixins

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("abcdefg");
}
};

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() {
...
input id="submitButton" ref="submitButton" type="button" value="提交" onClick={this.changeUserInfo.bind(this, 99)}/>
...
}

BodyIndex.defaultProps = defaultProps;

ReactMixin(BodyIndex.propTypes,MixinLog);
点击页面上的提交按钮🔘在console.log中会出现MixinLog componentDidMount和abcdefg

posted @ 2017-05-30 20:07  ArielChen  阅读(246)  评论(0编辑  收藏  举报