何时在反应 onClick 中调用函数 vs 函数（）？ [复制]答案

【问题标题】：When to call function vs function() in react onClick? [duplicate]何时在反应 onClick 中调用函数 vs 函数（）？ [复制]
【发布时间】：2021-10-23 13:21:49
【问题描述】：

我对何时在反应组件中调用函数有疑问。有时，当我不将括号添加到函数调用时，我的代码会中断，但并非总是如此。我在这里缺少某种规则吗？

不起作用

// Callback of parent component
<Link onClick={this.props.OnNavigate}>
    A link
</Link>

有效

// Callback of parent component
<Link onClick={this.props.OnNavigate()}>
    A link
</Link>

// Callback for function of component
<li onClick={this.toggleDepartments}>other example</li>

【问题讨论】：

我认为第一个不起作用，因为这个反应类不知道 this.props.onNavigate 是函数还是属性。因此我们需要用括号来调用它。
this.toggleDepartment 属于这个类，所以 react 类知道它是函数，所以我们不需要任何括号。不过我不确定。需要搜索一下。
@Prakashsharma：不，事实并非如此。

标签： javascript reactjs

【解决方案1】：

foo() 正在调用foo 引用的函数。 foo本身只是一个函数的引用，并没有调用函数。

因此，如果您想此时此地调用函数，则需要使用括号。
如果您想将函数传递给其他代码，则必须省略括号，以便它可以调用该函数。事件处理程序就是这种情况。 this.props.OnNavigation 应该在点击事件发生时调用（这是将来的某个时间），而不是在渲染组件时。

【讨论】：

this.props.OnNavigation 不是对函数的引用吗？通过写 onClick={this.props.OnNavigate()}，我们不是在渲染期间调用它而不是 onClick。
没错。
但是根据问题 onClick={this.props.OnNavigate()}> 是如何工作的？
我不认为这是一个正确的评估。它可能“看起来”起作用。当然，onNavigation 也有可能返回一个作为实际事件处理程序的函数，但这可能不太可能。尽管如此，无论如何，我的说法是正确的。
是的，我认为您的陈述是正确且有道理的。但这件事让我很困惑。

【解决方案2】：

最好用括号调用函数，因为当您创建一个单独的 js 文件并将它们与脚本标签链接在一起时，您可以确定它正在调用该特定函数。

【讨论】：

谢谢！您是否有任何文件/帖子引用此内容，以便我了解更多相关信息？
我有两本来自 Interactive Python 的外部“书籍”（这是我的教授制作的！），您可以自己测试并阅读。这个是给初学者的，但是里面还是有很多有用的js东西：interactivepython.org/runestone/static/webfundamentals/…另一个是比较复杂的js，涵盖了ECMAscript 6：interactivepython.org/runestone/static/JS4Python/index.html