将事件处理程序道具传递为箭头 function 或 function 参考之间的区别

Question

In a class Component, I have something like this:

render() {
  const { onClose } = this.props;

  // later, in the return statement, inside a bunch of other nested markup:
  <CloseIcon onClick={() => onClose()} className="qmCloseButton" />
  <AnotherIcon onClick={() => onClose("/path1")} className="qmCloseButton" />
  <AnotherIcon onClick={() => onClose("/path2")} className="qmCloseButton" />
}

The close handler prop that I pass in is:

const onCloseModal = urlAfterClose => {
  if (urlAfterClose) {
    history.push(urlAfterClose);
  } else {
    setShowSuccessModal(false);
  }
};

Everything works. However, I always like to avoid arrow functions in my markup when I can, so I try this small change:

  <CloseIcon onClick={onClose} className="qmCloseButton" />
  <AnotherIcon onClick={() => onClose("/path1")} className="qmCloseButton" />
  <AnotherIcon onClick={() => onClose("/path2")} className="qmCloseButton" />

But for the CloseIcon , the onClose method gets called with a class (looks like it might be the component itself?) instead of being called with no argument. It only works as an arrow function.

What am I missing here?

Answer 1

It's totally different syntaxes

onClick={onClose} =/= () => onClick={()=>onClose()}

onClick={onClose} in JavaScript this will pass all arguments available to onClose function, which second one runs without params

its same as

onClick={onClose} = onClick={(e)=>onClose(e)}