React自定义组件绑定onMouseEnter/onMouseLeave无效果，原生HTML元素却正常？Gatsby项目技术问询

这是React新手非常容易踩的一个典型坑，我来帮你拆解清楚问题根源和解决办法：

核心问题：自定义组件不会自动转发事件Props #

你的<Term>是自定义组件，和原生HTML元素（比如<span>）的行为不一样——React不会自动把你传给自定义组件的onMouseEnter、onMouseLeave这类事件属性，绑定到组件内部的DOM元素上。

看你的term.js代码，组件只接收了word和symbol两个Props，完全没用到传入的事件监听函数，所以鼠标悬停事件根本没被绑定到任何可交互的DOM节点上，自然触发不了setShowNoteB的状态更新。

快速解决：转发事件Props到内部DOM元素 #

修改Term组件，把传入的事件Props（或者直接用剩余Props）绑定到内部的容器元素上即可：

方案一：用剩余Props接收所有额外属性（推荐） #

// term.js
import React from 'react';

const Term = ({ word, symbol, ...rest }) => {
  return (
    // 把所有额外属性（包括事件监听）绑定到最外层div
    <div {...rest}>
      <span>{word}</span>
      <span>{symbol}</span>
    </div>
  );
};

export default Term;

方案二：显式指定事件Props #

如果你想更清晰地控制传递的事件，可以单独接收并绑定：

// term.js
import React from 'react';

const Term = ({ word, symbol, onMouseEnter, onMouseLeave }) => {
  return (
    <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
      <span>{word}</span>
      <span>{symbol}</span>
    </div>
  );
};

export default Term;

修改后，鼠标悬停在<Term>区域时，事件就会触发你传入的状态更新函数，NoteB就能正常显示了。

关于你提到的其他疑问解答 #

• 箭头函数的问题：箭头函数在这里不是问题！你用() => setShowNoteB(true)是完全正确的写法——这样传递的是一个函数引用，只有当事件触发时才会执行。而直接写onMouseEnter={setShowNoteB(true)}，相当于组件渲染时就立刻执行了setShowNoteB(true)，导致状态更新→组件重新渲染→再次执行该函数，陷入无限循环，这就是你看到错误的原因。
• 为什么console.log能部分生效：如果没转发Props，这个console.log其实根本不会被执行；如果偶尔看到输出，大概率是误操作了其他元素，或者之前的代码有临时改动，本质还是自定义组件没转发事件导致的。
• 是组件组合还是useState的问题？：都不是！就是React自定义组件的Props转发规则——自定义组件默认不会处理原生事件Props，必须显式传递给内部的DOM元素。

内容的提问来源于stack exchange，提问作者infieri