如何讓mixin在es6中工作？

Question

我正在學習流星和reactjs。我遇到了混合功能。我正在使用es6去除mixin。我現在如何在我的es6代碼中享受mixin的功能？

下面是一個代碼

混入使用

Signupform = React.createClass({ 
    mixins: [ReactMeteorData], 
    getMeteorData(){ 
     let data = {}; 
     data.currentUser = Meteor.user(); 
     return data; 
    }, 
    getInitialState(){ 
     return { 
      message: '', 
      messageClass: 'hidden' 
     } 
    }, 
    render(){ 

    } 
}); 

不能使用混入那麼，如何使此代碼工作

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 

export default class SignupForm extends Component { 
    constructor(props){ 
     super(props); 
     this.state = { 
      message:'', 
      messageClass:'' 
     } 
     this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    getMeteorData(){ 
      let data = {}; 
      data.currentUser = Meteor.user(); 
      console.log('data',data); 
      return data; 
     } 

    render(){ 
     return(
      ) 
    } 
} 

相同混入是用於其他幾個組件。我正在跟隨用流星和reactjs構建社交網絡的教程。

Answer 1

const ReactMeteorDataWrap = (BaseComponent)=>{ 
    return class ExportClass extends Component { 
     getMeteor(){ 
      //todo::some code to get Metor 
     } 
     render(){ 
      return <BaseComponent getMeteor={()=>this.getMeteor()} 
       {...this.props}></BaseComponent> 
     } 
    } 
} 

export default ReactMeteorDataWrap 

ü可以使用它像

class SignupForm extends Component { 
    constructor(props){ 
     super(props); 
     this.state = { 
      message:'', 
      messageClass:'' 
     } 
     this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    getMeteorData(){ 
      let data = {}; 
      data.currentUser = this.props.getMeteor().user(); 
      console.log('data',data); 
      return data; 
     } 

    render(){ 
     return(
      ) 
    } 
} 
export default ReactMeteorDataWrap(SignupForm)