ミックスインを反応させるにはどうすればいいですか？

Question

私は流星と反応を学んでいます。私はmixinsの機能に遭遇しました。私はmixinが削除されているes6を使用しています。どうすれば私の反応es6コードでミックスインの機能を楽しむことができますか？ここで

は

ミックスインはを使用したコードである

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(
      ) 
    } 
} 

同じミックスインであることを確認することができますどのようにミックスインを使用することはできません他のいくつかのコンポーネントで使用されています。私は流星と反応してソーシャルネットワークを構築するチュートリアルに従っています。

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 

Uはあなたにもこの記事https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-componentsをお読みください

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)