1
resposta

porque obrigar meu component a ler um user context de uma tela do qual ele não devia saber que existe?

Eu tenho um component de dado de entrega. e hoje ele está no cadastro.

se eu quiser reaproveitar esse componente como eu poderia fazer isso se ele está esperando um context do cadastro e não um user context dele mesmo?

Fiquei pensando sobre isso. o certo seria eu ter um useContext por componente ? e passar pra ele o que eu quero que ele leia/valid ?

Não entendi porque componentizar se todo mundo vai ler do mesmo useContext.

1 resposta

Fala Mauricio, tudo bem?

Qualquer filho de um context.Provider (que é o componente que provê os valores para seus filhos) pode utilizar os valores desse contexto, ou seja, qualquer filho pode utilizar os valores desse contexto, por exemplo:

import React from 'react';
import {  MyContext  } from '../context'; //Aqui importamos  um contexto que criamos na pasta context.

function Home() { //Digamos que aqui seja o "index" da nossa aplicação, em que todos os componentes estarão.

        return (
                <MyContext.Provider value={'Oi'}> //Aqui temos o nosso provider, que é o componente responsavel por mandar os valores do nosso context que fica entre chaves de value. E passaremos um valor que será uma string 'oi', mas você pode passar qualquer valor, seja uma array de objetos ou outra coisa.
                            <MeuComponente >
                                    <MeuComponente >
                                             <MeuComponente >

                                            < /MeuComponente> //Todos esses componentes possuem acesso ao value do nosso contextProvide, não importa a profundidade.
                                    < /MeuComponente>
                            < /MeuComponente>
                <MyContext.Provider>
        )
}

export default Home;

Então como dito, todos esses componentes tem acesso ao value do nosso context provider desde que sejam filhos desse context provider não importa a profundidade. E como aprendido nas aulas do curso você pode utilizar os valores do contexto utilizando o hook useContext:

import React, { useContext } from 'react';
import MyContext from '../../context'; //Aqui importamos o context que desejamos utilizar

function MeuComponente() {
        const value = useContext(MyContext) //Aqui utilizamos o hook useContext passando o nosso context como paramêtro para que possamos obter os valores que vierem do context.Provider. Agora temos acesso a todos valores que o nosso context.Provider fornecer, incluse a string que passamos no value.

        console.log(value) //Retornará 'Oi' pois foi o que passamos como value.

        return (

        )
}

Desse modo, desde que haja um contexto por volta daquele componente, você pode utilizar a qualquer momento e em qualquer local desde que seja filho do provider. O context você não cria para cada componente, pois geralmente usamos o context para passar algum valor para o componente pai ou algum outro através de state ou algo do tipo. Então caso queira utilizar o seu componente em outro local você terá que utilizar o hook useContext, e não faz sentido criar outro context pois como o próprio nome diz, significa "contexto", então nesse caso da aula do curso você criou um contexto para validar formulários, então se for utilizar algum outra coisa que não seja para validações de formulário é valor que crie sim um novo contexto.

Espero ter ajudado, bons estudos e se ainda permancer sua dúvida por contar com a gente :D