REACT - 无法调用 onClick()

Question

我有这个自定义组件来呈现图标Notify：

<div className="nav-item__wide-screen">
    <Notify 
    onClick={() => markAsRead()}  // <== here
    Icon={NotificationsOutlineIcon} 
    notify={unreadNum} 
  />
</div>

而 markAsRead 方法是：

const markAsRead = async () => {    
    console.log('REQUESTING FOR READ NOTIFICATIONS')
    // await makeRequest();
  };

通知组件是：

 const Notify = ({ Icon, notify, size }) => {
  let fontSize = size || 20;
  return (
    <div className="notify">
      <Icon className="notify__icon" style={{ fontSize }} />
      {
        notify && <span className="notify__number">{notify}</span>
      }
    </div>
  )
}

我从来没有遇到过这个问题，太疯狂了。

Answer 1

您正在onClick向组件传递一个道具，但该组件不使用或引用这样的道具。将您的通知更改为：

 const Notify = ({ Icon, notify, size, onClick }) => {
  let fontSize = size || 20;
  return (
    <div onClick={onClick} className="notify">
      <Icon className="notify__icon" style={{ fontSize }} />
      {
        notify && <span className="notify__number">{notify}</span>
      }
    </div>
  )
}