在 React 中，为什么这个 onClick 代码片段可以工作，但我尝试编写它的其他方式却不行？

Question

为什么这对 onClick 有效

const mapDispatchToProps = (dispatch) => ({
  toggleCartHidden: () => dispatch(toggleCartHidden()),
});

<Button
  onClick={() => {
    history.push('/checkout');
    toggleCartHidden();
  }}
>Button text</Button>

但这不起作用（路由不起作用）

<Button
  onClick={
    (() => {
      history.push('/checkout');
    },
    toggleCartHidden)
  }
>Button text</Button>

我有另一个具有类似代码的组件，它与 onClick 一起使用此语法（onClick 中没有函数调用）

const mapDispatchToProps = (dispatch) => ({
  toggleCartHidden: () => dispatch(toggleCartHidden()),
});

<div className='cart-icon' onClick={toggleCartHidden}> ICON </div>

Answer 1

因为您传递的是 expression 已评估。在 expression 处，您使用 , 运算符评估每个部分，但它仅 returns 最后一个 toggleCartHidden.

如果你在你的控制台上(1, 3, 5)它returns5。

在 React 中，为什么这个 onClick 代码片段可以工作，但我尝试编写它的其他方式却不行？

In React, why does this onClick snippet of code work but not this other way ive tried to write it?

javascript

onclick

reactjs