Question

下面是codecademy的代码片段。我是Java和React的新手，所以我只想问为什么this.myFunc之后不需要括号。我以为调用Javascript函数需要括号。这个React是特定的，还是我在这里缺少什么？

谢谢！

class MyClass extends React.Component {
  myFunc() {
    alert('Stop it.  Stop hovering.');
  }
  render() {
    return (
      <div onHover={this.myFunc}>
      </div>
    );
  }
}

Answer 1

如果函数使用括号编写，则将在render上调用它，而没有括号的函数只是对该函数的引用，不会自调用，而是等待悬停事件发生。

<div onHover={this.myFunc()}> // Calls the myFunc function and invokes it on render

<div onHover={this.myFunc}> // References the myFunc function and invokes it on hover

Answer 2

当用户悬停时，React将为您处理该函数的调用。在这种情况下，如果将其更改为<div onHover={this.myFunc()}>，该函数将在渲染器上运行，并且如果该函数返回一个函数，则返回的函数将在悬停时运行。这不是你想要的。

这可能是JavaScript的有用功能，可以为另一部分代码提供稍后运行的功能。

例如：

setTimeout(myFunc, 1000);

function myFunc() {
    console.log("1 second has passed");
}

我不希望myFunc立即运行。仅在超时完成后。所以我让setTimeout替我称呼它。

Answer 3

调用函数时，将onHover设置为返回该函数的值（在这种情况下未定义），因为函数不返回任何值。您想将onHover事件绑定为自身功能，而不是返回值。

在ReactJS中使用“ this”关键字调用函数

3 个答案: