-2

Eu estou fazendo um blog usando Reactjs e Material UI. Já criei vários componentes e agora estou montando as paginas.

Acredito que minha pergunta tenha a ver com javascript do qualquer outra coisa.

Como eu atribuo vários valores para uma mesma variável, e dependendo de uma entrada, será atribuído um valor para essa variável?

Eu fiz assim:

export default function index(props) {
  if (props.vertical === true) {
    var width = "100px";
  } else {
    var width = "200px";
  }

  return <Box sx={{ widht: width }}>
    {/* Componente */}
    </Box>;
}

Aqui eu usei style={width}, mas eu gostaria de usar em varios lugares da minha aplicação.

Funciona, mas acredito estar errado. Mas nao sei como seria a abordagem certa.

1
  • Segue alguns exemplos utilizando o styled, visto que você está utilizando o material-ui v5 (stackoverflow.com/questions/69239013/…) na versão 4 nós usávamos a biblioteca clsx pois o mesmo era focado no uso de className, se você estiver usando className, recomendo utilizar o clsx.
    – Forsaiken
    1/07/2022 às 13:39

1 Resposta 1

-2

Bom essa é uma abordagem que não serve se vc planeja utilizar o valor de width em outros componentes que fora dessa árvore precisam saber do valor obtido.

Minha sugestão é que você estude sobre redux. Ou useContext fornecido pelo próprio react.

Essa abordagem permite que você crie variáveis globais que podem ser atualizadas em qualquer parte de sua aplicação fornecendo apenas uma única fonte de verdade.

Não vou colocar código aqui pq isso resolveria apenas esse problema. Mas se vc pesquisar sobre o assunto resolverá esse problema e muitos outros e em breve vai ajudar pessoas com dúvidas semelhantes. Vale a pena o estudo desse assunto.

2
  • Incrivel!! Muito obrigado. É exatamente isso, ainda me falta saber muoita coisa basica, dei uma olhada rapida, acho que useContext é perfeito aqui. Obrigado de verdade.
    – brunovjk
    13/06/2022 às 10:25
  • Que bom que vai servir é um conceito muito interessante deixa bem poderosa a forma de criar componentes que podem reagir a mudança de estado de outro componente mesmo que não estejam relacionados isso realmente muda o jogo. :) 13/06/2022 às 10:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .