Fala Hebson, tudo bem? Espero que sim!
Da sim! Mas isso ja é algo mais "complexo", o que você pode utilizar é algo chamado de Context API, que aliás temos um curso aqui na Alura que ensina como usar.
O que fazemos é criar um contexto onde podemos prover alguma coisa (variáveis, métodos, objetos, array, qualquer coisa) para os componentes de forma global.
Para criar um contexto, vamos utilizar uma função do React chamada createContext
:
import { createContext } from "react"
export const MeuContexto = createContext()
E utiliza-mos ele como componente, acessando a propriedade Provider
, devemos envolver esse componente em volta dos componentes que queremos que tenha acesso a esse contexto:
import { MeuContexto } from "./meucontexto"
<MeuContexto.Provider>
<Componente1 />
<Componente2 />
</MeuContexto.Provider>
Você deve passar para esse provider uma propriedade chamada value
onde vai ficar os valores que você estará "enviando" para os componentes filhos:
import { MeuContexto } from "./meucontexto"
<MeuContexto.Provider value={{nome: "Mateus"}}>
<Componente1 />
<Componente2 />
</MeuContexto.Provider>
Nesse caso, passei como valor um objeto com uma propriedade nome
, agora TODOS componentes filhos, independente do nivel que estiver (pode ter 30 componentes filhos, um dentro do outro) que mesmo assim você terá acesso a esse objeto.
Para ter acesso a esse valor que passamos para o provider, no componente que você quer utilizar esse valor você deve usar o contexto como um componente acessando a propriedade Consumer
(Como utilizamos o Provider para prover os valores, utilizaremos o Consumer para consumir):
import { MeuContexto } from "./meucontexto"
import React from "react"
class Componente1 extends React.Components {
render() {
return (
<MeuContexto.Consumer>
</MeuContexto.Consumer>
)
}
}
E você deve utilizar uma função anônima (ou arrow function) como filho, e receber como parâmetro o valor passado la no provider:
import { MeuContexto } from "./meucontexto"
class Componente1 extends Components {
render() {
return (
<MeuContexto.Consumer>
{(value) => {
return <h1>{value.nome}</h1>
}}
</MeuContexto.Consumer>
)
}
}
Dessa forma, eu também retornei um h1, mostrando a propriedade nome
do objeto criado.
Você pode dar uma olhada no código clicando aqui
Lembrando, Context API é bem explicado no curso React: Gerenciamento de estados globais com ContextAPI, caso queira aprender com detalhes, recomendo fazer o curso ou consultar a documentação
Espero ter ajudado, abraços e bons estudos :D