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

results matching ""

    No results matching ""