javascript - 重写 React Component 的原型(prototype)方法

Question

假设我有以下 React 组件类:

class SayHello extends React.Component {
    constructor(props) {
        super(props);

        this.handleOnClick = this.handleOnClick.bind(this);
    }

    render() {
        return <div onClick={this.handleOnClick}>Click Me</div>;
    }

    handleOnClick() {
        console.log("clicked");
    }
}

我想做的是创建一个高阶组件，它知道 SayHello 中的 handleOnClick 但 before 调用 SayHello 的 handleOnClick，我希望它执行我首先传入的一些代码(即我想运行在我的服务器中记录某些内容的代码)。

是否有用于执行此类操作的 React 模式？

编辑:

我想在这里提供更多背景信息。我希望我的高阶组件在调用哪些方法方面是动态的。例如，有时它可能是 handleOnClick，但有时它可能是 handleOnSomethingElse。

Answer 1

A higher-order component是一个接受组件参数并返回新组件的函数。

此函数返回一个带有修饰的handleClick 方法的组件:

// A higher-order component that runs some code before
// the given component's `handleClick` method
function wrapHello(componentClass) {
  return class wrapped extends componentClass {
    beforeHandleClick() {
      console.log("I run first!")
    }

    handleClick(...args) {
      this.beforeHandleClick()
      super.handleClick(...args)
    }
  }
}

This pattern很简洁，因为它根本不是 React 特有的；这只是一个pure function .这意味着它很容易测试和推理。

这是一个不使用 React 的测试工具:

function wrapHello(componentClass) {
  return class wrapped extends componentClass {
    beforeHandleClick() {
      console.log("I run first!")
    }

    handleClick(...args) {
      this.beforeHandleClick()
      super.handleClick(...args)
    }
  }
}

class SayHello {
  handleClick() {
    console.log("handleClick")
  }
}

const WrappedHello = wrapHello(SayHello)
new WrappedHello().handleClick()