React中鼠标悬停时setColor不生效，为何条件判断方式可行？

你第一种方式失效的核心问题是按钮样式的backgroundColor赋值语法错误：

在你的代码里，按钮的style属性写了：

style={{ backgroundColor: { color } }}

这里的{color}是把状态变量color包裹成了一个对象（相当于{ color: "black" }），但React的style属性要求backgroundColor的值必须是字符串类型的颜色值（比如"black"、"white"），而不是对象，所以React无法识别这个值，导致背景色不变化。

而你第二种方式里，backgroundColor: MouseOver ? "black":"white"直接返回的是字符串类型的颜色值，符合style属性的要求，所以能正常生效。

修正后的代码 #

把按钮的style属性改成直接引用color变量即可：

import React from "react";

function App() {
  const [headingText, setHeadingText] = React.useState("Hello");
  const [color, setColor] = React.useState("white");
  function mouseOver() {
    setColor("black");
    setHeadingText("Yo");
  }
  function mouseOut() {
    setColor("white");
    setHeadingText("Bye");
  }
  return (
    <div className="container">
      <h1>{headingText}</h1>
      <input type="text" placeholder="What's your name?" />
      <button
        style={{ backgroundColor: color }} {/* 去掉多余的大括号 */}
        onMouseOver={mouseOver}
        onMouseOut={mouseOut}
      >
        Submit
      </button>
    </div>
  );
}

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