在 JSX 中调用 javascript 函数：为什么调用没有 () 的函数有效？

IT技术 javascript reactjs react-native jsx
2021-05-12 06:37:59

目前在 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 ？

2个回答

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

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

e使用es6 中称为属性初始化器的东西自动绑定。

如果要传递参数，则必须执行类似onClick={(e)=>makeDoggy(e, "hello")}. 这将"hello"作为第二个参数传递给函数makeDoggy

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

onClick={functionName}

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

其它你可能感兴趣的问题
上一篇大层冷却 下一篇Material-UI 中使用 Styled-Components 的媒体查询