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.
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)