ReactJS不能使用组合组件

Question

Here is my super simple enhancer:

'use strict';

import React from 'react';

function BaseComponent(ComposedComponent) {
    return class extends React.Component {
        static displayName = "BaseComponent";

        constructor(props) {
            super(props);
        }

        updateState(obj) {
            if (this.isMounted() && obj) {
                this.setState(obj);
            }
        }

        render() {
            return (

                <ComposedComponent {...this.props} {...this.states} />
            )
        }
    }
}

export default BaseComponent;

And I'm enhancing my component as follows:

'use strict';

import React from 'react';
import BaseComponent from '../composits/Base.jsx';

@BaseComponent
class Home extends React.Component {
    static displayeName = 'Home';

    constructor(props) {
        super(props);
    }

    render() {
        console.log(this.updateState)

        return (
            <div>Hi</div>
        )
    }
}

export default Home

But this does not work! console.log(this.updateState) is null . What am I doing wrong?

EDIT

Maybe I'm missing something here. By the design I have above, will Home be the "enhanced" component, or BaseComponent ? On otherwords, would Home have access to BaseComponent methods/states/props or the other way around?

Answer 1

Give it a name

function baseComponent(ComposedComponent) {
    return class BaseComponent extends React.Component {
        // ommited
    }
}

 export default baseComponent;

Or try to wrap it

'use strict';

import React from 'react';
import BaseComponent from '../composits/Base.jsx';

class Home extends React.Component {
    // ommited
}

export default BaseComponent(Home);