javascript - 在 JSX : why does calling a function without the () work? 中调用 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={(e)=>makeDoggy(e)}

e 使用名为 property initializer 的东西自动绑定(bind)在 es6 中。

如果你想传递参数，你必须做类似onClick={(e)=>makeDoggy(e, "hello")}的事情。这会将 "hello" 作为第二个参数传递给函数 makeDoggy