Hay un ícono que dice que la llamada está activa, con el nombre de clase "callConnect". Cuando paso el mouse sobre el ícono, el ícono debería cambiar, el nuevo ícono sería del nombre de clase "callDisconnect"
Solo estoy escribiendo un fragmento para mostrar mi implementación que no funciona:
estoy usando useRef y una función para actualizar
const hover = useRef(false) const updateHoverState = (val: boolean) => { hover.current = val }En mi componente, tengo un método que muestra el ícono de la siguiente manera:
<div onMouseOver={() => { updateHoverState(true) console.log("hovering", hover.current)} } onMouseOut={() => { updateHoverState(false) console.log("coming out", hover.current)} } > {console.log("rendering", hover.current)} //not working {hover.current ? <Icon onClick={() => { }} className={"callDisconnect"} /> : <Icon onClick={() => { }} className={"callConnect"} />} </div>Cuando ejecuto el código, veo que el desplazamiento se actualiza a verdadero y falso correctamente cuando paso el mouse y me muevo, pero los íconos no cambian. La re-renderización no está sucediendo. Como solucionarlo por favor ayuda.
Tenga en cuenta: ya intenté usar useState, como no funcionó, cambié a useRef.
estado de uso:
const [hover, setHover] = useState(false) <div onMouseOver={() => { setHover(true) } onMouseOut={() => { setHover(false) } > {hover ? <Icon onClick={() => { }} className={"callDisconnect"} /> : <Icon onClick={() => { }} className={"callConnect"} />} //not updating on hover </div>La única forma de provocar una nueva representación en reaccionar es establecer el estado. Entonces, en lugar de usar una referencia, use una variable de estado:
const App = () => { const [hover, setHover] = React.useState(false); return ( <div style={{ width: 50, height: 50 }} onMouseOver={() => { setHover(true); }} onMouseOut={() => { setHover(false); }} > {hover ? ( <div style={{ width: 50, height: 50 }} onClick={() => {}} className={"callDisconnect"} /> ) : ( <div style={{ width: 50, height: 50 }} onClick={() => {}} className={"callConnect"} /> )} </div> ); }; ReactDOM.render(<App />, document.getElementById("app")); .callConnect { background-color: green } .callDisconnect { background-color: red } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script> <div id="app"></div>Debe usar el useState en lugar de useRef para hacer que su componente se vuelva a renderizar. También puede aplicar la condición directamente en className en lugar de repetir todo el componente solo para un cambio de clase:
const [hover, setHover] = useState(false); <div onMouseOver={() => setHover(true)} onMouseOut={() => setHover(false)} > <Icon onClick={() => {}} className={hover ? "callDisconnect" : "callConnect"} /> </div>;