在 onClick 中反应隐式 return

Question

所以我最近在代码库中看到了这一点。来自 onClick

的隐式 return

<Button onClick={() => history.push('/urlTing') }>
   Ting
</Button>

这是一个很大的禁忌吗？还是更好？此处的任何输入将不胜感激。两者似乎都提供了所需的行为。

显然这是没有隐式 return.

的样子

<Button onClick={() => {
   history.push('/urlTing'); 
}}>
   Ting
</Button>

Answer 1

没有区别。如果在保持单行格式的同时不希望隐式 return，请使用 void keyword:

<Button onClick={() => void history.push('/urlTing') }>
   Ting
</Button>

Answer 2

隐式return没有错。 onClick 事件处理程序的 return 值不会被反应使用。根据文档 https://reactjs.org/docs/handling-events.html

Another difference is that you cannot return false to prevent default behavior in React. You must call preventDefault explicitly.

因此，您的处理程序 return 是什么，或者它是否 return 是什么都没有关系。

Answer 3

在标记内的每个呈现器上创建回调本身并不是最佳做法。回到问题：正如您提到的，主要区别在于 return 值。我怀疑来自 React 的 onClick API 会永远改变。但是，如果将来会有某种预期的 return 值 - 如果您做 return 某事，那么您可能会遇到一些麻烦。

经验法则：如果没有要求您 return 做某事 - 不要那样做。

react implict return in an onClick