Javascript 更改reactJS中鼠标悬停事件的样式，功能组件

我有一个组件和三个div标签。在一个

div

标记中，我创建了

onMouseOver

事件，并尝试更改文本的颜色

onMouseOver

React

onMouseOver

，

onMouseEnter

事件和样式在React中动态变化

import React from 'react'

function Middle() {
    const styles = {


        'text-align': 'center',
        'padding': '30px',
    }
    function myName() {
        styles.color = "green"

    }
    function noName() {

    }

    return (
        <div className="middle">

            <div id="cspace" style={styles} onMouseEnter={myName} onMouseLeave={noName}>
                <h1>Hello World</h1>
            </div>

        </div>
    )
}

export default Middle

从“React”导入React
函数中间（）{
常量样式={
“文本对齐”：“居中”，
“填充”：“30px”，
}
函数myName（）{
style.color=“绿色”
}
函数noName（）{
}
返回(
你好，世界
)
}
导出默认中间值

我希望div中文本的颜色可以更改。 我得到的结果是：

无法添加属性颜色，对象不可扩展

---

您只能使用css来实现这一点。试试这个

#cspace:hover{color:red;}

---

与使用

onMouseEnter

&

onMouseLeave

相比，我建议您使用CSS，因为与像

onMouseEnter

&

onMouseLeave

这样的Javascript操作相比，这些操作是轻量级的

函数中间（）{
常量样式={
“文本对齐”：“居中”，
“填充”：“30px”，
}
返回(
你好，世界
)
}
render（，document.getElementById（“根”））
#cspace:悬停{
颜色：绿色；
光标：指针；
}
对于功能组件，使用钩子存储
颜色值是一个很好的方案

function App() {
  const [color, setColor] = React.useState("");
  const styles = {
    "text-align": "center",
    padding: "30px",
    color: color
  };

  return (
    <div className="middle">
      <div
        id="cspace"
        style={styles}
        onMouseEnter={() => setColor("green")}
        onMouseLeave={() => setColor("")}
      >
        <h1>Hello World</h1>
      </div>
    </div>
  );
}

函数应用程序（）{
const[color，setColor]=React.useState（“”）；
常量样式={
“文本对齐”：“居中”，
填充：“30px”，
颜色：颜色
};
返回(
setColor（“绿色”）}
onMouseLeave={（）=>setColor（“”}
>
你好，世界
);
}

为什么要使用
onMouseOver
事件？您只需将
：hover
添加到div的css类中，并以这种方式更改颜色。1。你可以用钩子做。2.看看react usestyles：理想情况下，让它与CSS一起工作是最好的方法是，你说得对：悬停。我只是想理解为什么在使用函数更新对象之后，css更改在那个地方不起作用。