在 onClick 中反应隐含返回答案

【问题标题】：react implict return in an onClick在 onClick 中反应隐含返回
【发布时间】：2022-01-02 03:03:39
【问题描述】：

所以我最近在代码库中看到了这个。 onClick 的隐式返回

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

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

显然这是没有隐式返回的样子。

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

【问题讨论】：

【解决方案1】：

这并没有什么不同。如果您不希望在保持单行格式的同时隐式返回，请使用void keyword：

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

【讨论】：

【解决方案2】：

在标记内的每个渲染上创建回调本身并不是最佳实践。回到问题：正如您所提到的，主要区别在于返回值之间。我怀疑来自 React 的 onClick API 会不会改变。但是，如果将来会有某种预期的返回值 - 如果您确实返回某些东西，那么您可能会遇到一些麻烦。

经验法则：如果您没有被要求退货 - 不要那样做。

【讨论】：

【解决方案3】：

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

另一个区别是你不能返回 false 来阻止 React 中的默认行为。您必须明确调用preventDefault。

因此，您的处理程序返回什么或它是否返回任何内容都无关紧要。

【讨论】：