在JSX中调用javascript函数：为什么不使用（）调用函数会起作用？

Question

目前在Codecademy上学习有关React的知识。

来到这段代码：

import React from 'react';
import ReactDOM from 'react-dom';

function makeDoggy(e) {
  // Call this extremely useful function on an <img>.
  // The <img> will become a picture of a doggy.
  e.target.setAttribute('src', 'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-puppy.jpeg');
  e.target.setAttribute('alt', 'doggy');
}

const kitty = (
  <img 
    src="https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-kitty.jpg" 
    alt="kitty" 
    onClick={makeDoggy}
  />
  	
);

ReactDOM.render(kitty, document.getElementById('app'));

const kitty的onClick属性设置为makeDoggy函数。为此，您必须指出要使用Javascript，因此要使用{}括号。但是正确的答案是使用makeDoggy而不是使用标准函数调用：makeDoggy（）。

另外，makedoggy函数具有e参数。该函数什么时候传递？如何在函数需要一个不存在的参数的情况下调用makeDoggy？

Answer 1

没有括号，您不会调用该函数。没有括号的函数的名称是对函数的引用。此时在函数中不使用括号，因为我们不是在遇到代码的地方调用函数，而是希望将引用传递给函数。如果您使用makeDoggy()，该函数将在该点被调用，相反，我们希望仅在onClick之后才调用它，因此我们在此传递了引用makeDoggy。

或者你可以做 onClick={()=>makeDoggy()}

e在es6中使用称为属性初始值设定项的方式自动绑定。