从 HOC 访问封装的组件函数

IT技术 javascript reactjs
2021-05-15 14:47:24

想象一个用于触摸行为的 HOC，它通过 onTouchStart 检测按键触摸事件。现在使用触摸 HOC 封装的组件将拥有自己的处理程序逻辑。我的 HOC 组件如何调用包装的组件处理函数？

只是为了得到一个想法，这就是我需要的。在研究，我发现这是使用REF调用目标组件。我想知道是否有更好的方法来实现这一点。

触摸行为 HOC

const TouchBehavior = (WrappedComponent) =>

    class extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                active: false,
            };
            this.handleAction = this.handleAction.bind(this);
            this.setActiveState = this.setActiveState.bind(this);
            this.resetActiveState = this.resetActiveState.bind(this);
        }

        handleAction(e) {
            e.preventDefault();
            this.setActiveState();
            //call wrapped component specific handler logic here
            _.delay(() => this.resetActiveState() , 150);
        }

        setActiveState() {
            this.setState ({
                active: true
            });
        }

        resetActiveState() {
            this.setState ({
                active: false
            });
        }

        render() {
            let touchBehaviorProps = {
                onTouchStart: this.handleAction
            };
            return <WrappedComponent {...this.props} touchBehaviorProps={touchBehaviorProps} />
        }
    };

包裹组件

class Button extends React.Component {

 componentSpecificHandlerLogic(){
  //logic goes here
 }

 render () {
  return <button {..this.props.touchBehaviorProps}></button>
 }
}
1个回答

只要有可能，我会尽量不将逻辑拉回到树上，而是向下传递更多。

可能有很多方法可以实现这一点，但我在这种情况下看到的一个选项是将提供给包装组件的 prop 更改为一个函数，该函数使用提供的自定义逻辑为它们构造处理程序。

触摸行为 HOC

const TouchBehavior = (WrappedComponent) =>

    class extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                active: false,
            };
            this.handleAction = this.handleAction.bind(this);
            this.setActiveState = this.setActiveState.bind(this);
            this.resetActiveState = this.resetActiveState.bind(this);
        }

        handleAction(e, customHandler) {
            e.preventDefault();
            this.setActiveState();
            customHandler();
            _.delay(() => this.resetActiveState() , 150);
        }

        setActiveState() {
            this.setState ({
                active: true
            });
        }

        resetActiveState() {
            this.setState ({
                active: false
            });
        }

        render() {
            let touchBehaviorProps = (customHandler) => ({
                onTouchStart: (e) => this.handleAction(e, customHandler)
            });
            return <WrappedComponent {...this.props} touchBehaviorProps={touchBehaviorProps} />
        }
    };

包裹组件

class Button extends React.Component {

 componentSpecificHandlerLogic(){
  //logic goes here
 }

 render () {
  return <button {...this.props.touchBehaviorProps(componentSpecificHandlerLogic)}></button>
 }
}
其它你可能感兴趣的问题
上一篇Material UI - 将图标与排版文本对齐 下一篇在 reactjs 中进行服务器端调试