ReactJs-与ES6一起使用mixin

跟进Egghead.io的视频-“ES 6类中的反应组件”，以下内容有效：

 'use strict';
 import React from 'react';
 import Button from './components/form/button';
 import Label from './components/form/label';

---

//ToDo:下面的反应堆

 let reactMixin =  InnerComponent => class extends React.Component {
     constructor() {
         super()
         this.state = {count: 0}

    //binding custom methods
    this.increment = this.increment.bind(this);
}


increment() {
    this.setState({count: this.state.count + 1});
}

render() {
    return (
        <InnerComponent update={this.increment} {...this.state} {...this.props} />
    )
   }
 }

let reactMixin=InnerComponent=>类扩展React.Component{
构造函数（）{
超级（）
this.state={count:0}
//绑定自定义方法
this.increment=this.increment.bind（this）；
}
增量（）{
this.setState（{count:this.state.count+1}）；
}
render（）{
返回(
)
}
}

---

let ButtonMixed=reactMixin（按钮）；//使用局部变量
设LabelMixed=reactMixin（Label）；//使用局部变量
类应用程序扩展了React.Component{
render（）{
返回(
//想做什么
// 
// 
);
}
}
App.propTypes={txt:React.propTypes.any}；
module.exports=App；

问题：

 'use strict';
 import React from 'react';
 import Button from './components/form/button';
 import Label from './components/form/label';

我正在尝试将ReactMixin重构为一个单独的组件，导入其中， 然后在我的渲染中使用它，如下所示：

          <ReactMixins component={?} />

关于如何最好地将其重构为多种用途，您有什么想法吗

---

谢谢……

更新：在对ES6 React组件进行了大量工作之后，我更倾向于采用合成方法，但我将把我的答案留给后代

mixin正在退出，取而代之的是合成或继承

如果我正确理解您的情况，最简单的方法就是创建一个继承自的“基本”组件。比如：

export default class BaseButton extends React.Component {

  constructor(){
    super();
    //Set default state... if you want to
  }

  componentWillMount() {
     console.log("I will run anytime someone extends baseButton");
  }

  //etc

}

在所有按钮逻辑所在的位置，您可以像这样扩展它

然后：

现在，通过

super（）

或

this.whatever（）

您已经获得了所需的一切

如果你喜欢写作方法，我建议你好好阅读：

---

如果使用装饰器，我的ES6混合解决方案

/**
 * This is the ES6 mixin helper
 *
 * mixins {Array} Array of mixin objects
 *  mixin:
 *    optional name: {String} mixin's name
 *    optional lifecycleMethods: {Object} lifecycle methods
 *    optional instances: {Object} instance methods
 *    optional statics: {Object} statics methods
 * component {Object} Abstract component
 *
 * return component {Object} mixed component
 */
export default function ES6Mixin (mixins) {
  return function (component) {
    const warn = function (type, method, mixinName) {
      console.warn(
        new component(),
        `already has \`${method}\` ${type} method, it's overwritten by \`${mixinName}\` mixin`
      );
    };

    mixins.forEach((mixin) => {
      const { name, statics, instances, lifecycleMethods } = mixin;
      const _componentWillMount = component.prototype.componentWillMount;

      if (statics instanceof Object) {
        Object.keys(statics).forEach((method) => {
          if (statics[method] instanceof Object) {
            component[method] = Object.assign({}, statics[method], component[method]);
          } else {
            if (this[method]) {
              warn('statics', method, name || 'anonym');
            }
            this[method] = statics[method];
          }
        });
      }

      if (instances instanceof Object) {
        component.prototype.componentWillMount = function () {
          Object.keys(instances).forEach((method) => {
            if (this[method]) {
              warn('instance', method, name || 'anonym');
            }

            this[method] = instances[method].bind(this);
          });

          if (_componentWillMount) {
            _componentWillMount.apply(this, arguments);
          }
        };
      }

      if (lifecycleMethods instanceof Object) {
        Object.keys(lifecycleMethods).forEach((method) => {
          let _lifecycleMethod = component.prototype[method];

          component.prototype[method] = function () {
            lifecycleMethods[method].apply(this, arguments);

            if (_lifecycleMethod) {
              _lifecycleMethod.apply(this, arguments);
            }
          };
        });
      }
    });

    return component;
  };
}

export default class MyButton extends BaseButton {
   //I will already have the things that BaseButton has
}

/**
 * This is the ES6 mixin helper
 *
 * mixins {Array} Array of mixin objects
 *  mixin:
 *    optional name: {String} mixin's name
 *    optional lifecycleMethods: {Object} lifecycle methods
 *    optional instances: {Object} instance methods
 *    optional statics: {Object} statics methods
 * component {Object} Abstract component
 *
 * return component {Object} mixed component
 */
export default function ES6Mixin (mixins) {
  return function (component) {
    const warn = function (type, method, mixinName) {
      console.warn(
        new component(),
        `already has \`${method}\` ${type} method, it's overwritten by \`${mixinName}\` mixin`
      );
    };

    mixins.forEach((mixin) => {
      const { name, statics, instances, lifecycleMethods } = mixin;
      const _componentWillMount = component.prototype.componentWillMount;

      if (statics instanceof Object) {
        Object.keys(statics).forEach((method) => {
          if (statics[method] instanceof Object) {
            component[method] = Object.assign({}, statics[method], component[method]);
          } else {
            if (this[method]) {
              warn('statics', method, name || 'anonym');
            }
            this[method] = statics[method];
          }
        });
      }

      if (instances instanceof Object) {
        component.prototype.componentWillMount = function () {
          Object.keys(instances).forEach((method) => {
            if (this[method]) {
              warn('instance', method, name || 'anonym');
            }

            this[method] = instances[method].bind(this);
          });

          if (_componentWillMount) {
            _componentWillMount.apply(this, arguments);
          }
        };
      }

      if (lifecycleMethods instanceof Object) {
        Object.keys(lifecycleMethods).forEach((method) => {
          let _lifecycleMethod = component.prototype[method];

          component.prototype[method] = function () {
            lifecycleMethods[method].apply(this, arguments);

            if (_lifecycleMethod) {
              _lifecycleMethod.apply(this, arguments);
            }
          };
        });
      }
    });

    return component;
  };
}