在 JSX 中调用 javascript 函数：为啥在没有 () 的情况下调用函数？

Posted 2023-02-21

【中文标题】在 JSX 中调用 javascript 函数：为啥在没有 () 的情况下调用函数？

【英文标题】：Calling a javascript function in JSX: why does calling a function without the () work?在 JSX 中调用 javascript 函数：为什么在没有 () 的情况下调用函数？

【发布时间】：2018-06-23 20:28:21

【问题描述】：

目前在 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" 
     
    onClick=makeDoggy
  />
  	
);

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

const kitty 的 onClick 属性设置为函数 makeDoggy。为此，您必须表明您使用的是 javascript，因此需要使用 括号。但是，正确答案使用 makeDoggy 而不是使用标准函数调用：makeDoggy()。

另外，makedoggy 函数有一个 e 参数。该参数何时传递？当函数需要一个不存在的参数时，如何调用 makeDoggy？

【问题讨论】：

它只有在没有() 的情况下才能工作，React 与普通的 html 非常不同。

【参考方案1】：

没有括号，你就没有调用这个函数。不带括号的函数名是对该函数的引用。那时函数中没有使用括号，因为我们不是在遇到代码的地方调用函数，而是想传递对函数的引用。如果您使用 makeDoggy() ，该函数将在此时被调用，我们希望它仅在 onClick 之后被调用，因此我们在那里传递对 makeDoggy 的引用。

或者你也可以onClick=(e)=>makeDoggy(e)

e 在 es6 中使用 property initializer 自动绑定。

如果您想传递参数，您必须执行onClick=(e)=>makeDoggy(e, "hello") 之类的操作。这会将"hello" 作为第二个参数传递给函数makeDoggy

【讨论】：

这很有意义！但是 (e) 参数呢？传入了什么以及为什么即使 onClick 方法没有指定参数，对 makeDoggy(e) 的调用仍然有效？

有关属性初始化器的更多信息，请参阅medium.freecodecamp.org/…

我们如何将参数传递给makeDoggy？你能简单地把它们放在括号里吗？？

@sleepydrmike 将其添加到答案中

【参考方案2】：

不需要太强调解决方案只是消除双引号“”，在ReactJs中调用元素内的函数你只需执行以下操作

onClick=functionName

React 可以处理花括号中的函数。