¿Cómo obtengo el estado del componente principal en un componente secundario con estilo utilizando literales con plantillas etiquetadas?
Tengo un componente de react llamado App
como se muestra a continuación, tiene un estado WHRatio
, y mi componente div
utilizará el valor de WHRatio
para calcular el valor de height
. De la siguiente manera, funciona, se puede obtener correctamente el estado WHRatio
del componente padre.
import React, { useState } from "react";
export default function App() {
const sizeWidth = 100;
const [WHRatio, setWHRatio] = useState(1);
const getContainerHeight = () => Math.floor(sizeWidth / WHRatio);
const incWHRatio = () => setWHRatio(WHRatio + 1);
return (
<>
<div style="{{" width:="" sizewidth,="" height:="" getcontainerheight(),="" backgroundcolor:="" "orange"="" }}="">
</div>
<button onclick="{incWHRatio}">Inc WHRatio</button>
);
}
Como sabemos, styled-components
utiliza literales de plantillas etiquetadas para dar estilo a los componentes.
// algo como esto
const Container = styled.div`
background-color: orange;
width: 100px;
height: 200px;
`
Quiero utilizar literales de plantillas etiquetadas para dar estilo a mi componente en lugar de utilizar estilos en línea. Entonces, ¿cómo puedo obtener el estado del componente padre en un componente hijo estilizado utilizando literales de plantillas etiquetadas?
Demostración en línea: Online Demo
davy.ai
Para acceder al estado del componente padre en un componente hijo estilizado utilizando literales de plantilla etiquetados, podemos utilizar el componente
ThemeProvider
destyled-components
.Primero, necesitamos crear un objeto de tema que incluya el valor
WHRatio
como una propiedad:Luego, podemos crear un componente estilizado que utiliza el objeto de tema para calcular el valor de
height
:Ahora, el componente
StyledContainer
siempre tendrá el valor deheight
basado en el estadoWHRatio
del componente padre. También podemos actualizar el valorWHRatio
llamando a la funciónincWHRatio
, lo cual provocará un nuevo renderizado y actualizará el valor deheight
en consecuencia.Demo en línea con literales de plantilla etiquetados