用于onClick的React钩子上的箭头功能

Question

据我所知，每次将箭头函数放在jsx上时，都会为新函数创建一个新引用。像这样<p onClick={() => handleClick() />

我们可以在较早的带有类的react版本中执行<p onClick={this.handleClick />，但是不使用类怎么办？

function Comp() {
   function handleClick() {}
   return <p onClick={() => handleClick() />
}

这是丢失的，似乎我不得不再次在jsx中使用箭头功能。

Answer 1

应该像

function Comp() {
  const handleClick = () => {...};
  return <p onClick={handleClick} >Some clickable paragraph</p>;
}

Answer 2

  

但是不使用类怎么办？

实际上它在Handling Events中。

应该是：

function Comp() {
   function handleClick() {}
   return <p onClick={handleClick}>Click here</p>;
}

Answer 3

我只是将回调传递给Comp作为道具。

function Comp({handleClick}) {
   return <p onClick={handleClick}>Click here</p>;
}