Как обрабатывать события мыши в безгосударственном компоненте в React

Question

Все:

Интересно, если я использую без гражданства компонент, как можно обрабатывать события мыши, чтобы изменить стиль компонента, например:

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

Благодаря

Answer 1

Вы можете добиться того, что используя что-то вроде этого

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