我正在学习流星和reactjs。我遇到了mixins功能。我正在使用es6,其中删除了混合。我现在如何在我的React ES6代码中享受Mixins的功能?
这是一个代码
使用的mixins
Signupform = React.createClass({
mixins: [ReactMeteorData],
getMeteorData(){
let data = {};
data.currentUser = Meteor.user();
return data;
},
getInitialState(){
return {
message: '',
messageClass: 'hidden'
}
},
render(){
}
});
不能使用mixins,所以我该如何使代码工作
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(
)
}
}
在其他几个组件中使用相同的mixins。我正在关注使用流星和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
你可以像这样使用它
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)
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句