-1

Boa tarde!

Gostaria de saber como solucionar este problema.

Tenho um componente filho que é como se fosse um menu. Ele contém botões e, atualmente - de acordo com o click nas funções que estão no componente pai - vai exibir outros componentes. Só que eu não quero que as funções abaixo fiquem no componente pai. Gostaria que tais funções ficassem no filho.

Funções:

 const onChangeActive = (event, value) => {
            setSelectionActive(value)
          }

const onChangeType = (event, value) => {
            setChartType(value)
}

Mas, se eu coloco no filho eu perco o acesso dos states e suas mudanças que preciso no pai. Os states são: chartType e o selectionActive. Por isso, preciso dos estados dele - que neste caso são chartType e o selectionActive - acessiveis no componente Pai.

Componente Filho:

const Filho ={type, buttonActive, onChangeType = () => { }, onChangeActive = () => { } ) =>{
    
    return(
    <ToggleButton value={type} onChange={onChangeType}>
      <Button disabled={buttonActive===TABLE}>button 1</Button>
      <Button disabled={buttonActive===TABLE}>button 2</Button>
    </ToggleButton>
    <ToggleButton value={buttonActive} onChange={onChangeActive}>
      <IconButton>
        <Span title="chart" />
      </IconButton>
      <IconButton>
        <Span title="table" />
      </IconButton>
    </ToggleButton>
    )}

Componente Pai:

         const Pai = () => {
           const [chartType, setChartType] = useState(1)
           const [selectionActive, setSelectionActive] = useState(1)
    
           const onChangeActive = (event, value) => {
            setSelectionActive(value)
          }
        
          const onChangeType = (event, value) => {
            setChartType(value)
          }
            
            return(
                  <Filho buttonActive={selectionActive}
                  onChangeType={onChangeType}
                  onChangeActive={onChangeActive} />
          {selectionActive === SELECT_CHART ? renderOpcao1() : renderOpcao2()}
           )
        
        }

Como eu consigo tirar essas funções onChangeActive e onChangeType do pai, deixar no filho mas no pai continuar com acesso aos states chartType e selectionActive no componente pai?

2
  • 1
    Você já chegou a ler a seção Elevando o State da documentação do React? Existe uma explicação relativamente bem detalhada que pode ajudá-la. :) 23/03/2021 às 16:24
  • funcionou, obrigado !!
    – mari
    24/03/2021 às 14:39

1 Resposta 1

0

Você pode usar o context API, do próprio react. O fluxo de informações do react vai sempre de cima para baixo, de pai pra filho. Pra fornecer um estado a vários componentes, a partir do context API, você deve criá-lo em uma hierarquia elevada. Ficou confuso né? Vamos por partes então.

  1. O primeiro passo é criar um componente de contexto, onde vamos declarar métodos e fornecer valores que serão acessíveis globalmente:

Importamos o createContext e o useState, que é usado pelos métodos que você postou na questão, criamos um contexto, a priori vazio, e então o exportamos por padrão:

import { createContext, useState } from 'react';
const MyContext = createContext({});
export default MyContext;
  1. Ótimo! Já temos o contexto criado, mas tem um detalhe faltando. Todo contexto precisa de um provider. É ele quem vai entregar as informações para todos os seus filhos. Um contexto sem um provider é como uma carta sem carteiro, então vamos criá-lo:

O provider é como um componente funcional qualquer do react. Vamos programar os métodos desejados e retorná-los a partir de jsx:

export function MyProvider({children}) {
   const [chartType, setChartType] = useState(1)
   const [selectionActive, setSelectionActive] = useState(1)
   
   const onChangeActive = (event, value) => {
        setSelectionActive(value)
   }
    
   const onChangeType = (event, value) => {
        setChartType(value)
   }

    return (
        <MyContext.Provider value={{
                chartType,
                selectionActive,
                onChangeActive,
                onChangeType
            }}>
            {children}
        </MyContext.Provider>
    )
}

O que fizemos acima foi simplesmente transferir os métodos e variáveis dos seus componentes para outro e retorná-los dentro da prop value de <MyContext.Provider />. Tendo feito isso, agora poderemos acessar essas informações a partir de todos os componentes filhos desse provider. Considere então os seus componentes <Filho /> e <Pai />, precisamos garantir que eles sejam filhos do provider. Para isso importamos o MyProvider:

import { MyProvider } from './caminho/relativo/myContext.js';

function index() {
    return (
        <MyProvider>
            <Pai>
                <Filho />
            </Pai>
        </MyProvider
    )
}

Tendo feito isso, todas as informações retornadas dentro do value do provider estarão acessíveis, mas para puxá-las precisamos usar o hook useContext(). Vamos supor que lá dentro do componente filho você queira acessar o método onChangeActive, para isso você primeiro importaria o hook e o contexto:

import { useContext } from 'react';
import MyContext from './caminho/relativo/myContext.js';

Depois, dentro do componente que quer acessar os dados, faríamos:

const { onChangeActive } = useContext(MyContext);

Se quiséssemos, além do onChangeActive, o estado de chartType:

const { onChangeActive, chartType } = useContext(MyContext);

É importante mencionar que, toda vez que um estado for alterado dentro do contexto, todos os componentes que usam esse contexto serão renderizados novamente, portanto, certifique-se de que o provider só tenha filhos que realmente precisam daquelas informações. Recomendo ainda essa leitura da própria documentação do react, que traz informações completas do fluxo de informações e ciclo de vida do context API. Você pode ver o desenvolvimento de um contexto do zero com esse vídeo, que apesar de ser feito em react native, pode ser completamente reaproveitado pelo react.

2
  • 1
    Se a função tiver q ser compartilhada entre pai e filho contexto chega a ser matar formiga com bazuca, não acha? 23/03/2021 às 18:37
  • É sim! fica avisado a quem interessar. A solução que você recomendou nos comentários da pergunta parece ser bem mais adequada, uma solução simples pra um problema simples.
    – yoyo
    23/03/2021 às 19:41

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 .