reactjs – 如何在React中处理无状态组件中的鼠标事件

我想知道我是否使用无状态组件,如何处理鼠标事件以更改组件样式,例如：

const Com = (props) => {
    var hltStyle = false;
    function highlight(){
        // I do not know what put here
    }

    var hltStyle = {
        backgroundColor: !hltStyle?"lightgreen": "tomato"
    }

    return (
        <div style={hltStyle} onMouseOver={ highlight } >HOVER ME</div>
    )
}

我想要的只是悬停此组件并更改背景颜色.内部突出显示其他一些逻辑,这就是为什么我不能简单地使用CSS

谢谢

const Com = () => {
        function over(e){
                e.target.style.backgroundColor="red";
        }
        function out(e){
                e.target.style.backgroundColor='';
        }
        return <div onMouseOver={over} onMouseOut={out}>HOVER ME </div>;
}

无论如何,如果你觉得你需要声明一些变量来将它们用作状态,你应该使用普通组件而不是无状态组件.

jsfiddle