Encontré un problema al intentar usar el gancho de reacción useRef para agregar cssText en Typescript. He probado el código en Javascript y funciona perfectamente bien, pero no puedo hacerlo funcionar en Typescript. Mi código es el siguiente. El código cambiará el color de fondo de un div cuando haga clic en el botón.

 import {useRef} from 'react'; function App() { const divRef = useRef<HTMLDivElement>(null) const handleClick = () => { divRef.current && divRef.current.style.cssText += "background-color: blue"; } return ( <div className="App" ref={divRef}> <button onClick={handleClick}>Click me</button> </div> ); }

Recibí el siguiente mensaje de error:

 ERROR in src/App.tsx Line 6:51: Parsing error: ';' expected webpack compiled with 2 errors ERROR in src/App.tsx:6:52 TS1005: ';' expected. 4 | const divRef = useRef<HTMLDivElement>(null); 5 | const handleClick = () => { > 6 | divRef.current && divRef.current.style.cssText += "background-color: blue"; | ^^ 7 | }; 8 | 9 | return (

Captura de pantalla del error

Mis dependencias son las siguientes:

 "dependencies": { "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.1.1", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.0", "@types/node": "^16.11.33", "@types/react": "^18.0.8", "@types/react-dom": "^18.0.3", "react": "^18.1.0", "react-dom": "^18.1.0", "react-scripts": "5.0.1", "typescript": "^4.6.4", "web-vitals": "^2.1.4" },

Agradezco si alguien puede compartir alguna idea sobre este problema.