javascript - 在 React 中向高阶组件添加方法

Question

据我了解，ReactJS 中的 HOC 会向装饰组件添加 props，但我想添加也可以作用于 state 的方法。
例如，我通常不会在未先检查 this.isMounted() 的情况下调用 this.setState()。本质上，我想要:

export default ComposedComponent => class BaseComponent extends React.Component {
    static displayName = "BaseComponent";

    constructor(props) {
        super(props);
    }

//------> I want this method to be available to any ComposedComponent
//------> And it has to act upon the state of ComposedComponent
    updateState(obj) {
        if (this.isMounted() && obj) {
            this.setState(obj);
        }
    }

    render() {
        return (

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

假设我想装饰我的组件 Home。所以我只是将其作为 export default BaseComponent(Home) 返回。

但是 this.updateState() 在 Home 类中不可用。我该如何解决这个问题？

Answer 1

好吧，我明白了。我在这上面花了太多时间，所以我希望这个答案也能帮助别人。简短回答:将装饰器中的方法添加到 props，然后将其绑定(bind)到装饰类的构造函数中。

代码如下:

export default ComposedComponent => class BaseComponent extends React.Component {
    static displayName = "BaseComponent";

    constructor(props) {
        super(props);
        // Note how I am adding this to state
        // This will be passed as a prop to your composed component
        this.state = {
            updateState: this.updateState
        }
    }


    updateState(obj) {
        this.setState(obj);
    }

    render() {
        return (

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

下面是一个将使用它的类的示例(为简单起见，我使用 ES7):

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

    constructor(props) {
        super(props);
        // And here I am binding to it
        this.updateState = this.props.updateState.bind(this);
    }

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