es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Cómo obtengo el estado del componente principal en un componente secundario con estilo utilizando literales con plantillas etiquetadas?

¿Cómo obtengo el estado del componente principal en un componente secundario con estilo utilizando literales con plantillas etiquetadas?

04 Aug, 2023 Programación

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

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para acceder al estado del componente padre en un componente hijo estilizado utilizando literales de plantilla etiquetados, podemos utilizar el componente ThemeProvider de styled-components.

    Primero, necesitamos crear un objeto de tema que incluya el valor WHRatio como una propiedad:

    import React, { useState } from "react";
import styled, { ThemeProvider } from "styled-components";

const theme = {
  WHRatio: 1
};

export default function App() {
  const sizeWidth = 100;
  const [WHRatio, setWHRatio] = useState(1);

  const getContainerHeight = () => Math.floor(sizeWidth / WHRatio);

  const incWHRatio = () => setWHRatio(WHRatio + 1);

  return (
    <>
      <themeprovider theme="{{" ...theme,="" whratio="" }}="">
        <styledcontainer></styledcontainer>
      </themeprovider>
      <button onclick="{incWHRatio}">Inc WHRatio</button>

  );
}

    Luego, podemos crear un componente estilizado que utiliza el objeto de tema para calcular el valor de height:

    const StyledContainer = styled.div`
  background-color: orange;
  width: 100px;
  height: ${({ theme }) => Math.floor(100 / theme.WHRatio)}px;
`;

    Ahora, el componente StyledContainer siempre tendrá el valor de height basado en el estado WHRatio del componente padre. También podemos actualizar el valor WHRatio llamando a la función incWHRatio, lo cual provocará un nuevo renderizado y actualizará el valor de height en consecuencia.

    Demo en línea con literales de plantilla etiquetados

Comments are closed.