如何使Mixins在React ES6中工作? [英] How to make mixins work in react es6?

问题描述

我正在学习流星和reactjs.我遇到了mixins功能.我正在使用es6，其中删除了混合.我现在如何在我的React ES6代码中享受Mixins的功能?

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?

这是一个代码

使用了混合

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构建社交网络的教程.

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可以像

 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)

这篇关于如何使Mixins在React ES6中工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！