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

Question

Why does this work?

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

But this doesn't work?

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

Full code

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

Answer 1

The onClick function requires a short hand function syntax ()=>{} especially when you are calling a function and passing the parameters at the same time. It is also used when you are calling multiple functions inside onClick.

When to Use ()=> in onClick?

1. Calling a function with a parameter
2. Calling multiple function in a single onClick
3. Providing a function definition inside onClick

When not to use?

• Calling a function without a parameter