Soy nuevo aquí, así que si mi pregunta no es buena, házmelo saber para que pueda editar.
Estoy usando ReactJS + Material UI. Tengo un componente, pero quiero que este componente se represente con diferentes propiedades dependiendo de los accesorios, así:
En la página donde quiero renderizar el componente:
<AdBanner vertical={true} />Dentro de mi componente AdBanner tengo:
export default function AdBanner(props) { const [adWidth, setAdWidth] = useState("100%"); const [adHeight, setAdHeight] = useState("90px"); const [adSpacing, setAdSpacing] = useState(2); const [adDirection, setAdDirection] = useState("row"); useEffect(() => { if (props.vertical) { console.log("ola"); setAdWidth("320px"); setAdHeight("480px"); setAdSpacing(5); setAdDirection("column"); } }, [props.vertical]); return ( <> <Paper variant="outlined" sx={{ width: { xs: "100%", md: adWidth }, overflow: "hidden" }} > ...Mi objetivo es, cuando no especifico un valor para la propiedad "vertical", mi componente tiene ciertas características (como altura, ancho, ...). Pero en algunas partes de mi aplicación quiero un conjunto de otros valores para la misma propiedad.
Estaba recibiendo algunos errores, con la ayuda de #guilfer pude eliminar estos errores.
Alguien me puede decir si lo que hice es correcto? Gracias.
Aquí el código completo: https://github.com/brunovjk/saude-vapor
Gracias.
Hay algunas cosas en su código que en realidad no puede hacer en javascript. Cuando una variable se define usando "var", tiene alcance global. Aquí hay una explicación sobre las diferencias: https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/
Después de eso, hay algunas otras cosas que en realidad no hacemos en React, por lo general, en su caso, habría dos clases diferentes con el estilo que desea, luego, para aplicar el estilo, podría hacer algo similar a esto:
import style from "style.module.css" export default function AdBanner(props) { return <div className={props.vertical? style.firstClass : style.secondClass}>banner content<div> } .firstClass { ...one css styles } .secondClass { ...another css style }