React/Javascript：以可选参数作为道具传递函数

Question

我想将在 onClick 事件上调用的函数包装到另一个函数中，该函数在执行传递的函数之前执行一些附加操作。 因此，我想要一个函数，它接受一个函数作为带有可选参数的道具。

类似：

import React from "react";

import action from ...

export default class C extends React.Component {
  constructor(props) {
    super(props);
  }

  handleClickLinkOne(shift) {
    // do Stuff
  }
  
  handleClickLinkTwo(){
    // do Stuff
  }

  render() {
  
    return (
        <React.Fragment>
            <a
              className={...}
              onClick={(e) => action(this.handleClickLinkOne(e.shiftKey))}
            >
            CAPTION
            </a>
            <a
              className={...}
              onClick={() => action(this.handleClickLinkTwo())}
            >
            CAPTION TWO
            </a>
        <React.Fragment>
    );
  }
}

function action(prop){

// do stuff

prop();
}

我的问题是我不知道如何处理可选的“e”参数。

Answer 1

不确定我是否理解正确，但您应该将您的操作重构为类似的内容。

export function action(cb) {
 ...
 return function(e) {
  ...
  cb(e);
 }
}

import React from "react";

import action from ...

export default class C extends React.Component {
  constructor(props) {
    super(props);
  }

  handleClickLinkOne(e) {
    // do Stuff
    // e.shiftKey can be used here
  }
  
  handleClickLinkTwo(){
    // do Stuff
  }

  render() {
  
    return (
        <React.Fragment>
            <a
              className={...}
              onClick={action(this.handleClickLinkOne)}
            >
            CAPTION
            </a>
            <a
              className={...}
              onClick={action(this.handleClickLinkTwo)}
            >
            CAPTION TWO
            </a>
        <React.Fragment>
    );
  }
}