独立组件间共享 Mixins

最新推荐文章于 2023-04-15 14:38:20 发布

weixin_30709929

最新推荐文章于 2023-04-15 14:38:20 发布

阅读量77

点赞数

原文链接：http://www.cnblogs.com/ArielChen/p/7467603.html

版权

独立组件间共享 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

转载于:https://www.cnblogs.com/ArielChen/p/7467603.html