Javascript 如何使用onmousehave更改跨距状态？

我目前正在通过使用document.getElementById（'heart'）引用span来更改span的状态。innerHTML='favorite'

有更好的方法吗？如果是这样，请与我分享您的解决方案。我的代码写在下面

import React from 'react'

//custom  functions
const heartHover = (e)=>{
    document.getElementById('heart').innerHTML = 'favorite';
}
const heartNotHover = (e)=>{
    document.getElementById('heart').innerHTML = 'favorite_border';
}
const Navbar = () => {
    return (
        <div>
              <span id="heart" onMouseOver={heartHover} onMouseLeave={heartNotHover} class="material-icons">
                            favorite_border
              </span>
                  
        </div>
    )
}

export default Navbar

从“React”导入React
//自定义函数
常数heartHover=（e）=>{
document.getElementById（'heart'）.innerHTML='favorite'；
}
常数heartNotHover=（e）=>{
document.getElementById（'heart'）.innerHTML='favorite_border'；
}
常量导航栏=（）=>{
返回(
最爱的边界
)
}
导出默认导航栏

当您使用事件侦听器时，您需要使用Effect+clean它们

检查此解决方案：

本指南：