Search code examples
javascriptmeteorreactjsecmascript-6ecmascript-5

How to make mixins work in react es6?


I am learning meteor and reactjs. I have encountered to mixins functionality. I am using es6 where mixin is removed. How can i now enjoy the functionality of mixins in my react es6 code?

Here is a code

mixins used

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

    }
});

can't use mixins so how can i make this code work

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

Same mixins is used in several other components. I am following tutorial of building social network with meteor and reactjs.


Solution

  • 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 can use it like

     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)