什么时候在 onClick react中调用函数 vs 函数（）？

IT技术 javascript reactjs
2021-03-28 09:37:07

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

不起作用

// 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>
2个回答

foo()正在调用引用的函数foo。foo本身只是对函数的引用，它不会调用该函数。

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

但是根据问题 onClick={this.props.OnNavigate()}> 是如何工作的？
2021-05-24 09:37:07
this.props.OnNavigation 不是对函数的引用吗？通过编写 onClick={this.props.OnNavigate()}，我们不是在渲染过程中调用它而不是 onClick。
2021-06-05 09:37:07
是的，我认为你的陈述是正确的，而且是有道理的。但这件事让我很困惑。
2021-06-12 09:37:07
没错。
2021-06-14 09:37:07
我不认为这是一个正确的评估。它可能“似乎”起作用。当然，也有可能onNavigation返回一个作为实际事件处理程序的函数，但这可能不太可能。尽管如此，无论如何，我的陈述是正确的。
2021-06-21 09:37:07

使用括号调用函数是一种很好的做法，因为当您创建一个单独的 js 文件并将它们与脚本标记链接在一起时，您肯定知道它正在调用该特定函数。

谢谢！您是否有任何引用此内容的文件/帖子，以便我可以了解更多相关信息？
2021-05-22 09:37:07
我有两本来自 Interactive Python 的外部“书籍”（这是我的教授制作的！），您可以自己测试并阅读它。这个是给初学者的，但是里面还是有很多有用的js东西：interactivepython.org/runestone/static/webfundamentals /... 另一个是更复杂的js，涵盖了ECMAscript 6：interactivepython.org/runestone/static /JS4Python/index.html
2021-05-27 09:37:07
其它你可能感兴趣的问题
上一篇调用 setState() 函数时会发生什么？ 下一篇Next.js 全局 CSS 不能从自定义 <App> 以外的文件导入