与普通的 onClick 函数不同，为什么 React 不渲染没有箭头函数调用的函数的元素？

Question

为什么这样做有效？

<span onClick={()=>removeTodo(index)}>x</span>

但这行不通？

<span onClick={removeTodo(index)}>x</span>

完整代码

{todo.map((item, index) => {
  return (
    <pre className={index} key={index}>
      <h1 id={array}>{item}</h1>
      <span onClick={()=>removeTodo(index)}>x</span>
    </pre>
);
})}

Answer 1

onClick 函数需要简写函数语法 ()=>{} 尤其是当您同时调用函数和传递参数时。当您在 onClick 中调用多个函数时也会使用它。

何时在 onClick 中使用 ()=>？

调用带参数的函数
在单个 onClick 中调用多个函数
在 onClick 中提供函数定义

什么时候不用？

调用不带参数的函数

与普通的 onClick 函数不同，为什么 React 不渲染没有箭头函数调用的函数的元素？

Why doesn't React render an element without function invoked by arrow function unlike normal onClick functions?

javascript

reactjs