Question

根据我的理解，ReactJS中的HO会为您的装饰组件添加道具。但是我想添加一些也可以作用于.*(?=-)的方法。例如，我通常不会在未先检查state的情况下致电this.setState。从本质上讲，我想：

this.isMounted()

说我要装饰我的组件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。我该如何解决这个问题？

Answer 1

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

以下是代码：

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

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

1 个答案: