Tengo un archivo jsx:
import React from "react"; import ReactDom from "react-dom"; const styles = { textAlign: "center", color: "black" }; ReactDom.render( <div> <h1 style={styles}>Good {wish}</h1> </div>, document.querySelector("#root") ); document.querySelector("h1").addEventListener("click",function(){ styles.color="salmon"; console.log(styles); });No puedo cambiar el objeto de estilos al hacer clic, sigue siendo el mismo, "estilos.color" sigue siendo "negro". ¿Por qué no puedo modificar el objeto de estilos?
Realmente no debería intentar manipular el DOM cuando usa reaccionar. ¡Hace esas cosas por ti!
Crear un componente
Micomponente.jsx
import {useState} from 'react'; function myComponent(wish){ const [styles,updateStyles] = useState(); function doSomething() { // Change styles here updateStyles(/*Whatever you're doing to styles*/) } return( <h1 style={styles} onClick={doSomething}>Good {wish}</h1> ) } export default myComponent;y en tu componente principal
principal.js
import React from "react"; import ReactDom from "react-dom"; import MyComponent from './Mycomponent.jsx'; ReactDom.render( <div> <MyComponent wish={/*String here*/}/> </div>, document.querySelector("#root") ); }); Recomiendo enfáticamente que cuando comience un nuevo proyecto use create-react-app porque hace todas estas cosas repetitivas por usted para que pueda comenzar a codificar directamente en reaccionar en lugar de configurarlo usted mismo. También recomendaría familiarizarse con la documentación oficial de reacción.