From bab249058b532e31b3b229d9678752e27a63e3fd Mon Sep 17 00:00:00 2001 From: Nivaldo Farias Date: Mon, 20 Jan 2025 11:36:12 -0300 Subject: [PATCH 1/4] Translate `passing-data-deeply-with-context.md` to pt-br --- .../learn/passing-data-deeply-with-context.md | 412 +++++++++--------- 1 file changed, 206 insertions(+), 206 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 1aea87b35..d484aad4c 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -1,36 +1,36 @@ --- -title: Passing Data Deeply with Context +title: Passando Dados Profundamente com Contexto --- -Usually, you will pass information from a parent component to a child component via props. But passing props can become verbose and inconvenient if you have to pass them through many components in the middle, or if many components in your app need the same information. *Context* lets the parent component make some information available to any component in the tree below it—no matter how deep—without passing it explicitly through props. +Normalmente, você passará informações de um componente pai para um componente filho via props. Mas passar props pode se tornar verboso e inconveniente se você tiver que passá-las através de muitos componentes intermediários, ou se muitos componentes em seu aplicativo precisarem da mesma informação. *Contexto* permite que o componente pai torne algumas informações disponíveis para qualquer componente na árvore abaixo dele—não importa quão profundo—sem passá-las explicitamente através de props. -- What "prop drilling" is -- How to replace repetitive prop passing with context -- Common use cases for context -- Common alternatives to context +- O que é "prop drilling" +- Como substituir a passagem repetitiva de props por contexto +- Casos de uso comuns para contexto +- Alternativas comuns ao contexto -## The problem with passing props {/*the-problem-with-passing-props*/} +## O problema com passar props {/*the-problem-with-passing-props*/} -[Passing props](/learn/passing-props-to-a-component) is a great way to explicitly pipe data through your UI tree to the components that use it. +[Passar props](/learn/passing-props-to-a-component) é uma ótima maneira de transportar dados de forma explícita através da sua árvore de UI para os componentes que os utilizam. -But passing props can become verbose and inconvenient when you need to pass some prop deeply through the tree, or if many components need the same prop. The nearest common ancestor could be far removed from the components that need data, and [lifting state up](/learn/sharing-state-between-components) that high can lead to a situation called "prop drilling". +Mas passar props pode se tornar verboso e inconveniente quando você precisa passar uma prop em profundidade na árvore, ou se muitos componentes precisam da mesma prop. O ancestral comum mais próximo pode estar muito distante dos componentes que precisam de dados, e [elevar o estado](/learn/sharing-state-between-components) dessa forma pode levar a uma situação chamada "prop drilling". - + -Lifting state up +Elevando o estado - + Prop drilling @@ -38,11 +38,11 @@ Prop drilling -Wouldn't it be great if there were a way to "teleport" data to the components in the tree that need it without passing props? With React's context feature, there is! +Não seria ótimo se houvesse uma maneira de "teleportar" dados para os componentes na árvore que precisam deles sem passar props? Com o recurso de contexto do React, há! -## Context: an alternative to passing props {/*context-an-alternative-to-passing-props*/} +## Contexto: uma alternativa para passar props {/*context-an-alternative-to-passing-props*/} -Context lets a parent component provide data to the entire tree below it. There are many uses for context. Here is one example. Consider this `Heading` component that accepts a `level` for its size: +Contexto permite que um componente pai forneça dados para toda a árvore abaixo dele. Existem muitos usos para o contexto. Aqui está um exemplo. Considere este componente `Heading` que aceita um `level` para seu tamanho: @@ -53,12 +53,12 @@ import Section from './Section.js'; export default function Page() { return (
- Title - Heading - Sub-heading - Sub-sub-heading - Sub-sub-sub-heading - Sub-sub-sub-sub-heading + Título + Cabeçalho + Sub-cabeçalho + Sub-sub-cabeçalho + Sub-sub-sub-cabeçalho + Sub-sub-sub-sub-cabeçalho
); } @@ -90,7 +90,7 @@ export default function Heading({ level, children }) { case 6: return
{children}
; default: - throw Error('Unknown level: ' + level); + throw Error('Nível desconhecido: ' + level); } } ``` @@ -106,7 +106,7 @@ export default function Heading({ level, children }) { -Let's say you want multiple headings within the same `Section` to always have the same size: +Vamos supor que você quer que múltiplos cabeçalhos dentro da mesma `Section` sempre tenham o mesmo tamanho: @@ -117,19 +117,19 @@ import Section from './Section.js'; export default function Page() { return (
- Title + Título
- Heading - Heading - Heading + Cabeçalho + Cabeçalho + Cabeçalho
- Sub-heading - Sub-heading - Sub-heading + Sub-cabeçalho + Sub-cabeçalho + Sub-cabeçalho
- Sub-sub-heading - Sub-sub-heading - Sub-sub-heading + Sub-sub-cabeçalho + Sub-sub-cabeçalho + Sub-sub-cabeçalho
@@ -164,7 +164,7 @@ export default function Heading({ level, children }) { case 6: return
{children}
; default: - throw Error('Unknown level: ' + level); + throw Error('Nível desconhecido: ' + level); } } ``` @@ -180,55 +180,55 @@ export default function Heading({ level, children }) { -Currently, you pass the `level` prop to each `` separately: +Atualmente, você passa a prop `level` para cada `` separadamente: ```js
- About - Photos - Videos + Sobre + Fotos + Vídeos
``` -It would be nice if you could pass the `level` prop to the `
` component instead and remove it from the ``. This way you could enforce that all headings in the same section have the same size: +Seria bom se você pudesse passar a prop `level` para o componente `
` em vez e removê-la de ``. Dessa forma, você poderia garantir que todos os cabeçalhos na mesma seção tenham o mesmo tamanho: ```js
- About - Photos - Videos + Sobre + Fotos + Vídeos
``` -But how can the `` component know the level of its closest `
`? **That would require some way for a child to "ask" for data from somewhere above in the tree.** +Mas como o componente `` pode saber o nível de sua `
` mais próxima? **Isso exigiria alguma forma do filho "pedir" dados de algum lugar acima na árvore.** -You can't do it with props alone. This is where context comes into play. You will do it in three steps: +Você não pode fazer isso apenas com props. É aqui que o contexto entra em cena. Você fará isso em três etapas: -1. **Create** a context. (You can call it `LevelContext`, since it's for the heading level.) -2. **Use** that context from the component that needs the data. (`Heading` will use `LevelContext`.) -3. **Provide** that context from the component that specifies the data. (`Section` will provide `LevelContext`.) +1. **Criar** um contexto. (Você pode chamá-lo de `LevelContext`, já que é para o nível do cabeçalho.) +2. **Usar** esse contexto a partir do componente que precisa dos dados. (`Heading` usará `LevelContext`.) +3. **Fornecer** esse contexto a partir do componente que especifica os dados. (`Section` fornecerá `LevelContext`.) -Context lets a parent--even a distant one!--provide some data to the entire tree inside of it. +O contexto permite que um pai—até mesmo um distante!—forneça alguns dados para toda a árvore dentro dele. - + -Using context in close children +Usando contexto em filhos próximos - + -Using context in distant children +Usando contexto em filhos distantes -### Step 1: Create the context {/*step-1-create-the-context*/} +### Etapa 1: Criar o contexto {/*step-1-create-the-context*/} -First, you need to create the context. You'll need to **export it from a file** so that your components can use it: +Primeiro, você precisa criar o contexto. Você precisará **exportá-lo de um arquivo** para que seus componentes possam usá-lo: @@ -239,19 +239,19 @@ import Section from './Section.js'; export default function Page() { return (
- Title + Título
- Heading - Heading - Heading + Cabeçalho + Cabeçalho + Cabeçalho
- Sub-heading - Sub-heading - Sub-heading + Sub-cabeçalho + Sub-cabeçalho + Sub-cabeçalho
- Sub-sub-heading - Sub-sub-heading - Sub-sub-heading + Sub-sub-cabeçalho + Sub-sub-cabeçalho + Sub-sub-cabeçalho
@@ -286,7 +286,7 @@ export default function Heading({ level, children }) { case 6: return
{children}
; default: - throw Error('Unknown level: ' + level); + throw Error('Nível desconhecido: ' + level); } } ``` @@ -308,18 +308,18 @@ export const LevelContext = createContext(1); -The only argument to `createContext` is the _default_ value. Here, `1` refers to the biggest heading level, but you could pass any kind of value (even an object). You will see the significance of the default value in the next step. +O único argumento para `createContext` é o valor _default_. Aqui, `1` se refere ao maior nível de cabeçalho, mas você pode passar qualquer tipo de valor (até mesmo um objeto). Você verá a significância do valor default na próxima etapa. -### Step 2: Use the context {/*step-2-use-the-context*/} +### Etapa 2: Usar o contexto {/*step-2-use-the-context*/} -Import the `useContext` Hook from React and your context: +Importe o Hook `useContext` do React e seu contexto: ```js import { useContext } from 'react'; import { LevelContext } from './LevelContext.js'; ``` -Currently, the `Heading` component reads `level` from props: +Atualmente, o componente `Heading` lê `level` das props: ```js export default function Heading({ level, children }) { @@ -327,7 +327,7 @@ export default function Heading({ level, children }) { } ``` -Instead, remove the `level` prop and read the value from the context you just imported, `LevelContext`: +Em vez disso, remova a prop `level` e leia o valor do contexto que você acabou de importar, `LevelContext`: ```js {2} export default function Heading({ children }) { @@ -336,29 +336,29 @@ export default function Heading({ children }) { } ``` -`useContext` is a Hook. Just like `useState` and `useReducer`, you can only call a Hook immediately inside a React component (not inside loops or conditions). **`useContext` tells React that the `Heading` component wants to read the `LevelContext`.** +`useContext` é um Hook. Assim como `useState` e `useReducer`, você só pode chamar um Hook imediatamente dentro de um componente React (não dentro de loops ou condições). **`useContext` informa ao React que o componente `Heading` quer ler o `LevelContext`.** -Now that the `Heading` component doesn't have a `level` prop, you don't need to pass the level prop to `Heading` in your JSX like this anymore: +Agora que o componente `Heading` não tem uma prop `level`, você não precisa passar a prop de nível para `Heading` em seu JSX assim: ```js
- Sub-sub-heading - Sub-sub-heading - Sub-sub-heading + Sub-sub-cabeçalho + Sub-sub-cabeçalho + Sub-sub-cabeçalho
``` -Update the JSX so that it's the `Section` that receives it instead: +Atualize o JSX para que seja a `Section` que a receba em vez: ```jsx
- Sub-sub-heading - Sub-sub-heading - Sub-sub-heading + Sub-sub-cabeçalho + Sub-sub-cabeçalho + Sub-sub-cabeçalho
``` -As a reminder, this is the markup that you were trying to get working: +Como lembrete, esta é a marcação que você estava tentando fazer funcionar: @@ -369,19 +369,19 @@ import Section from './Section.js'; export default function Page() { return (
- Title + Título
- Heading - Heading - Heading + Cabeçalho + Cabeçalho + Cabeçalho
- Sub-heading - Sub-heading - Sub-heading + Sub-cabeçalho + Sub-cabeçalho + Sub-cabeçalho
- Sub-sub-heading - Sub-sub-heading - Sub-sub-heading + Sub-sub-cabeçalho + Sub-sub-cabeçalho + Sub-sub-cabeçalho
@@ -420,7 +420,7 @@ export default function Heading({ children }) { case 6: return
{children}
; default: - throw Error('Unknown level: ' + level); + throw Error('Nível desconhecido: ' + level); } } ``` @@ -442,13 +442,13 @@ export const LevelContext = createContext(1); -Notice this example doesn't quite work, yet! All the headings have the same size because **even though you're *using* the context, you have not *provided* it yet.** React doesn't know where to get it! +Observe que este exemplo ainda não funciona corretamente! Todos os cabeçalhos têm o mesmo tamanho porque **mesmo que você *use* o contexto, você ainda não *forneceu* ele.** O React não sabe de onde obtê-lo! -If you don't provide the context, React will use the default value you've specified in the previous step. In this example, you specified `1` as the argument to `createContext`, so `useContext(LevelContext)` returns `1`, setting all those headings to `

`. Let's fix this problem by having each `Section` provide its own context. +Se você não fornecer o contexto, o React usará o valor default que você especificou na etapa anterior. Neste exemplo, você especificou `1` como o argumento para `createContext`, então `useContext(LevelContext)` retorna `1`, definindo todos aqueles cabeçalhos como `

`. Vamos corrigir esse problema fazendo com que cada `Section` forneça seu próprio contexto. -### Step 3: Provide the context {/*step-3-provide-the-context*/} +### Etapa 3: Fornecer o contexto {/*step-3-provide-the-context*/} -The `Section` component currently renders its children: +O componente `Section` atualmente renderiza seus filhos: ```js export default function Section({ children }) { @@ -460,7 +460,7 @@ export default function Section({ children }) { } ``` -**Wrap them with a context provider** to provide the `LevelContext` to them: +**Envolva-os com um provedor de contexto** para fornecer o `LevelContext` a eles: ```js {1,6,8} import { LevelContext } from './LevelContext.js'; @@ -476,7 +476,7 @@ export default function Section({ level, children }) { } ``` -This tells React: "if any component inside this `
` asks for `LevelContext`, give them this `level`." The component will use the value of the nearest `` in the UI tree above it. +Isso informa ao React: "se algum componente dentro deste `
` pedir o `LevelContext`, forneça a ele esse `level`." O componente usará o valor do mais próximo `` na árvore de UI acima dele. @@ -487,19 +487,19 @@ import Section from './Section.js'; export default function Page() { return (
- Title + Título
- Heading - Heading - Heading + Cabeçalho + Cabeçalho + Cabeçalho
- Sub-heading - Sub-heading - Sub-heading + Sub-cabeçalho + Sub-cabeçalho + Sub-cabeçalho
- Sub-sub-heading - Sub-sub-heading - Sub-sub-heading + Sub-sub-cabeçalho + Sub-sub-cabeçalho + Sub-sub-cabeçalho
@@ -542,7 +542,7 @@ export default function Heading({ children }) { case 6: return
{children}
; default: - throw Error('Unknown level: ' + level); + throw Error('Nível desconhecido: ' + level); } } ``` @@ -564,15 +564,15 @@ export const LevelContext = createContext(1); -It's the same result as the original code, but you did not need to pass the `level` prop to each `Heading` component! Instead, it "figures out" its heading level by asking the closest `Section` above: +É o mesmo resultado que o código original, mas você não precisou passar a prop `level` para cada componente `Heading`! Em vez disso, ele "descobre" seu nível de cabeçalho perguntando o mais próximo `Section` acima: -1. You pass a `level` prop to the `
`. -2. `Section` wraps its children into ``. -3. `Heading` asks the closest value of `LevelContext` above with `useContext(LevelContext)`. +1. Você passa uma prop `level` para a `
`. +2. `Section` envolve seus filhos em ``. +3. `Heading` pergunta o valor mais próximo de `LevelContext` acima com `useContext(LevelContext)`. -## Using and providing context from the same component {/*using-and-providing-context-from-the-same-component*/} +## Usando e fornecendo contexto do mesmo componente {/*using-and-providing-context-from-the-same-component*/} -Currently, you still have to specify each section's `level` manually: +Atualmente, você ainda precisa especificar o `level` de cada seção manualmente: ```js export default function Page() { @@ -585,7 +585,7 @@ export default function Page() { ... ``` -Since context lets you read information from a component above, each `Section` could read the `level` from the `Section` above, and pass `level + 1` down automatically. Here is how you could do it: +Como o contexto permite que você leia informações de um componente acima, cada `Section` poderia ler o `level` da `Section` acima e passar `level + 1` automaticamente. Aqui está como você poderia fazer isso: ```js src/Section.js {5,8} import { useContext } from 'react'; @@ -603,7 +603,7 @@ export default function Section({ children }) { } ``` -With this change, you don't need to pass the `level` prop *either* to the `
` or to the ``: +Com essa mudança, você não precisa passar a prop `level` *nem* para a `
` nem para a ``: @@ -614,19 +614,19 @@ import Section from './Section.js'; export default function Page() { return (
- Title + Título
- Heading - Heading - Heading + Cabeçalho + Cabeçalho + Cabeçalho
- Sub-heading - Sub-heading - Sub-heading + Sub-cabeçalho + Sub-cabeçalho + Sub-cabeçalho
- Sub-sub-heading - Sub-sub-heading - Sub-sub-heading + Sub-sub-cabeçalho + Sub-sub-cabeçalho + Sub-sub-cabeçalho
@@ -659,7 +659,7 @@ export default function Heading({ children }) { const level = useContext(LevelContext); switch (level) { case 0: - throw Error('Heading must be inside a Section!'); + throw Error('Cabeçalho deve estar dentro de uma Seção!'); case 1: return

{children}

; case 2: @@ -673,7 +673,7 @@ export default function Heading({ children }) { case 6: return
{children}
; default: - throw Error('Unknown level: ' + level); + throw Error('Nível desconhecido: ' + level); } } ``` @@ -695,19 +695,19 @@ export const LevelContext = createContext(0); -Now both `Heading` and `Section` read the `LevelContext` to figure out how "deep" they are. And the `Section` wraps its children into the `LevelContext` to specify that anything inside of it is at a "deeper" level. +Agora tanto `Heading` quanto `Section` leem o `LevelContext` para descobrir quão "profunda" elas estão. E a `Section` envolve seus filhos no `LevelContext` para especificar que qualquer coisa dentro dela está em um nível "mais profundo". -This example uses heading levels because they show visually how nested components can override context. But context is useful for many other use cases too. You can pass down any information needed by the entire subtree: the current color theme, the currently logged in user, and so on. +Este exemplo usa níveis de cabeçalho porque eles mostram visualmente como os componentes aninhados podem substituir o contexto. Mas o contexto é útil para muitos outros casos de uso também. Você pode passar qualquer informação necessária para toda a subárvore: o tema de cor atual, o usuário logado atualmente, e assim por diante. -## Context passes through intermediate components {/*context-passes-through-intermediate-components*/} +## O contexto passa através de componentes intermediários {/*context-passes-through-intermediate-components*/} -You can insert as many components as you like between the component that provides context and the one that uses it. This includes both built-in components like `
` and components you might build yourself. +Você pode inserir quantos componentes quiser entre o componente que fornece contexto e aquele que o utiliza. Isso inclui tanto componentes embutidos como `
` quanto componentes que você pode construir. -In this example, the same `Post` component (with a dashed border) is rendered at two different nesting levels. Notice that the `` inside of it gets its level automatically from the closest `
`: +Neste exemplo, o mesmo componente `Post` (com uma borda tracejada) é renderizado em dois níveis de aninhamento diferentes. Note que o `` dentro dele obtém seu nível automaticamente do mais próximo `
`: @@ -718,10 +718,10 @@ import Section from './Section.js'; export default function ProfilePage() { return (
- My Profile + Meu Perfil
@@ -740,14 +740,14 @@ function AllPosts() { function RecentPosts() { return (
- Recent Posts + Posts Recentes
); @@ -792,7 +792,7 @@ export default function Heading({ children }) { const level = useContext(LevelContext); switch (level) { case 0: - throw Error('Heading must be inside a Section!'); + throw Error('Cabeçalho deve estar dentro de uma Seção!'); case 1: return

{children}

; case 2: @@ -806,7 +806,7 @@ export default function Heading({ children }) { case 6: return
{children}
; default: - throw Error('Unknown level: ' + level); + throw Error('Nível desconhecido: ' + level); } } ``` @@ -832,58 +832,58 @@ export const LevelContext = createContext(0); -You didn't do anything special for this to work. A `Section` specifies the context for the tree inside it, so you can insert a `` anywhere, and it will have the correct size. Try it in the sandbox above! +Você não fez nada especial para que isso funcionasse. Um `Section` especifica o contexto para a árvore dentro dele, então você pode inserir um `` em qualquer lugar, e ele terá o tamanho correto. Experimente no sandbox acima! -**Context lets you write components that "adapt to their surroundings" and display themselves differently depending on _where_ (or, in other words, _in which context_) they are being rendered.** +**O contexto permite que você escreva componentes que "se adaptam ao seu ambiente" e se apresentem de forma diferente dependendo de _onde_ (ou, em outras palavras, _em que contexto_) eles estão sendo renderizados.** -How context works might remind you of [CSS property inheritance.](https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance) In CSS, you can specify `color: blue` for a `
`, and any DOM node inside of it, no matter how deep, will inherit that color unless some other DOM node in the middle overrides it with `color: green`. Similarly, in React, the only way to override some context coming from above is to wrap children into a context provider with a different value. +Como o contexto funciona pode lembrar você da [herança de propriedades CSS.](https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance) No CSS, você pode especificar `color: blue` para um `
`, e qualquer nó DOM dentro dele, não importa quão profundo, herdará essa cor a menos que algum outro nó DOM no meio a sobrescreva com `color: green`. Similarmente, no React, a única maneira de substituir algum contexto vindo de cima é envolver os filhos em um provedor de contexto com um valor diferente. -In CSS, different properties like `color` and `background-color` don't override each other. You can set all `
`'s `color` to red without impacting `background-color`. Similarly, **different React contexts don't override each other.** Each context that you make with `createContext()` is completely separate from other ones, and ties together components using and providing *that particular* context. One component may use or provide many different contexts without a problem. +No CSS, propriedades diferentes como `color` e `background-color` não se sobrescrevem. Você pode definir a cor de todos os `
`s como vermelha sem afetar a `background-color`. Da mesma forma, **diferentes contextos do React não se sobrescrevem.** Cada contexto que você cria com `createContext()` é completamente separado de outros, e une componentes que usam e fornecem *aquele particular* contexto. Um componente pode usar ou fornecer muitos contextos diferentes sem problemas. -## Before you use context {/*before-you-use-context*/} +## Antes de usar contexto {/*before-you-use-context*/} -Context is very tempting to use! However, this also means it's too easy to overuse it. **Just because you need to pass some props several levels deep doesn't mean you should put that information into context.** +O contexto é muito tentador para usar! No entanto, isso também significa que é fácil demais abusar dele. **Só porque você precisa passar algumas props por vários níveis profundos, não significa que você deve colocar essa informação em contexto.** -Here's a few alternatives you should consider before using context: +Aqui estão algumas alternativas que você deve considerar antes de usar contexto: -1. **Start by [passing props.](/learn/passing-props-to-a-component)** If your components are not trivial, it's not unusual to pass a dozen props down through a dozen components. It may feel like a slog, but it makes it very clear which components use which data! The person maintaining your code will be glad you've made the data flow explicit with props. -2. **Extract components and [pass JSX as `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) to them.** If you pass some data through many layers of intermediate components that don't use that data (and only pass it further down), this often means that you forgot to extract some components along the way. For example, maybe you pass data props like `posts` to visual components that don't use them directly, like ``. Instead, make `Layout` take `children` as a prop, and render ``. This reduces the number of layers between the component specifying the data and the one that needs it. +1. **Comece passando [props.](/learn/passing-props-to-a-component)** Se seus componentes não forem triviais, não é incomum passar uma dúzia de props por uma dúzia de componentes. Pode parecer cansativo, mas isso deixa muito claro quais componentes usam quais dados! A pessoa que mantém seu código ficará feliz que você tornou o fluxo de dados explícito com props. +2. **Extraia componentes e [passe JSX como `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) para eles.** Se você passar alguns dados através de muitas camadas de componentes intermediários que não usam esses dados (e apenas os passam para baixo), isso muitas vezes significa que você esqueceu de extrair alguns componentes ao longo do caminho. Por exemplo, talvez você passe props de dados como `posts` para componentes visuais que não os usam diretamente, como ``. Em vez disso, faça com que `Layout` aceite `children` como uma prop, e renderize ``. Isso reduz o número de camadas entre o componente que especifica os dados e aquele que precisa deles. -If neither of these approaches works well for you, consider context. +Se nenhuma dessas abordagens funcionar bem para você, considere o contexto. -## Use cases for context {/*use-cases-for-context*/} +## Casos de uso para contexto {/*use-cases-for-context*/} -* **Theming:** If your app lets the user change its appearance (e.g. dark mode), you can put a context provider at the top of your app, and use that context in components that need to adjust their visual look. -* **Current account:** Many components might need to know the currently logged in user. Putting it in context makes it convenient to read it anywhere in the tree. Some apps also let you operate multiple accounts at the same time (e.g. to leave a comment as a different user). In those cases, it can be convenient to wrap a part of the UI into a nested provider with a different current account value. -* **Routing:** Most routing solutions use context internally to hold the current route. This is how every link "knows" whether it's active or not. If you build your own router, you might want to do it too. -* **Managing state:** As your app grows, you might end up with a lot of state closer to the top of your app. Many distant components below may want to change it. It is common to [use a reducer together with context](/learn/scaling-up-with-reducer-and-context) to manage complex state and pass it down to distant components without too much hassle. +* **Temas:** Se seu aplicativo permite que o usuário mude sua aparência (por exemplo, modo escuro), você pode colocar um provedor de contexto no topo do seu aplicativo e usar esse contexto em componentes que precisam ajustar sua aparência visual. +* **Conta atual:** Muitos componentes podem precisar saber quem é o usuário atualmente logado. Colocá-lo em contexto torna conveniente lê-lo em qualquer lugar na árvore. Alguns aplicativos também permitem que você opere várias contas ao mesmo tempo (por exemplo, para deixar um comentário como um usuário diferente). Nesses casos, pode ser conveniente envolver uma parte da UI em um provedor aninhado com um valor de conta atual diferente. +* **Roteamento:** A maioria das soluções de roteamento usa contexto internamente para manter a rota atual. É assim que cada link "sabe" se está ativo ou não. Se você construir seu próprio roteador, talvez queira fazer o mesmo. +* **Gerenciamento de estado:** À medida que seu aplicativo cresce, você pode acabar com muitos estados mais perto do topo do seu aplicativo. Muitos componentes distantes abaixo podem querer alterá-lo. É comum [usar um redutor junto com contexto](/learn/scaling-up-with-reducer-and-context) para gerenciar estados complexos e passá-los para componentes distantes sem muita complicação. -Context is not limited to static values. If you pass a different value on the next render, React will update all the components reading it below! This is why context is often used in combination with state. +O contexto não está limitado a valores estáticos. Se você passar um valor diferente na próxima renderização, o React atualizará todos os componentes que o estiverem lendo abaixo! É por isso que o contexto é frequentemente usado em combinação com estado. -In general, if some information is needed by distant components in different parts of the tree, it's a good indication that context will help you. +Em geral, se alguma informação é necessária por componentes distantes em diferentes partes da árvore, é um bom indicativo de que o contexto ajudará você. -* Context lets a component provide some information to the entire tree below it. -* To pass context: - 1. Create and export it with `export const MyContext = createContext(defaultValue)`. - 2. Pass it to the `useContext(MyContext)` Hook to read it in any child component, no matter how deep. - 3. Wrap children into `` to provide it from a parent. -* Context passes through any components in the middle. -* Context lets you write components that "adapt to their surroundings". -* Before you use context, try passing props or passing JSX as `children`. +* O contexto permite que um componente forneça algumas informações para toda a árvore abaixo dele. +* Para passar contexto: + 1. Crie e exporte-o com `export const MyContext = createContext(defaultValue)`. + 2. Passe-o para o Hook `useContext(MyContext)` para lê-lo em qualquer componente filho, não importa quão profundo. + 3. Envolva os filhos em `` para fornecê-lo de um pai. +* O contexto passa através de qualquer componente no meio. +* O contexto permite que você escreva componentes que "se adaptam ao seu entorno". +* Antes de usar o contexto, tente passar props ou passar JSX como `children`. -#### Replace prop drilling with context {/*replace-prop-drilling-with-context*/} +#### Substitua o prop drilling por contexto {/*replace-prop-drilling-with-context*/} -In this example, toggling the checkbox changes the `imageSize` prop passed to each ``. The checkbox state is held in the top-level `App` component, but each `` needs to be aware of it. +Neste exemplo, alternar a caixa de seleção muda a prop `imageSize` passada para cada ``. O estado da caixa de seleção é mantido no componente `App` de nível superior, mas cada `` precisa estar ciente disso. -Currently, `App` passes `imageSize` to `List`, which passes it to each `Place`, which passes it to the `PlaceImage`. Remove the `imageSize` prop, and instead pass it from the `App` component directly to `PlaceImage`. +Atualmente, `App` passa `imageSize` para `List`, que o passa para cada `Place`, que o passa para o `PlaceImage`. Remova a prop `imageSize`, e em vez disso a passe diretamente do componente `App` para o `PlaceImage`. -You can declare context in `Context.js`. +Você pode declarar contexto em `Context.js`. @@ -905,7 +905,7 @@ export default function App() { setIsLarge(e.target.checked); }} /> - Use large images + Usar imagens grandes
@@ -959,38 +959,38 @@ function PlaceImage({ place, imageSize }) { ```js src/data.js export const places = [{ id: 0, - name: 'Bo-Kaap in Cape Town, South Africa', - description: 'The tradition of choosing bright colors for houses began in the late 20th century.', + name: 'Bo-Kaap em Cape Town, África do Sul', + description: 'A tradição de escolher cores vibrantes para casas começou no final do século 20.', imageId: 'K9HVAGH' }, { id: 1, - name: 'Rainbow Village in Taichung, Taiwan', - description: 'To save the houses from demolition, Huang Yung-Fu, a local resident, painted all 1,200 of them in 1924.', + name: 'Rainbow Village em Taichung, Taiwan', + description: 'Para salvar as casas da demolição, Huang Yung-Fu, um residente local, pintou todas as 1,200 delas em 1924.', imageId: '9EAYZrt' }, { id: 2, - name: 'Macromural de Pachuca, Mexico', - description: 'One of the largest murals in the world covering homes in a hillside neighborhood.', + name: 'Macromural de Pachuca, México', + description: 'Um dos maiores murais do mundo cobrindo casas em um bairro na colina.', imageId: 'DgXHVwu' }, { id: 3, - name: 'Selarón Staircase in Rio de Janeiro, Brazil', - description: 'This landmark was created by Jorge Selarón, a Chilean-born artist, as a "tribute to the Brazilian people."', + name: 'Escada Selarón no Rio de Janeiro, Brasil', + description: 'Este marco foi criado por Jorge Selarón, um artista nascido no Chile, como uma "tributo ao povo brasileiro."', imageId: 'aeO3rpI' }, { id: 4, - name: 'Burano, Italy', - description: 'The houses are painted following a specific color system dating back to 16th century.', + name: 'Burano, Itália', + description: 'As casas são pintadas seguindo um sistema de cores específico que remonta ao século XVI.', imageId: 'kxsph5C' }, { id: 5, - name: 'Chefchaouen, Marocco', - description: 'There are a few theories on why the houses are painted blue, including that the color repels mosquitos or that it symbolizes sky and heaven.', + name: 'Chefchaouen, Marrocos', + description: 'Existem algumas teorias sobre por que as casas são pintadas de azul, incluindo que a cor repele mosquitos ou que simboliza o céu e o paraíso.', imageId: 'rTqKo46' }, { id: 6, - name: 'Gamcheon Culture Village in Busan, South Korea', - description: 'In 2009, the village was converted into a cultural hub by painting the houses and featuring exhibitions and art installations.', + name: 'Gamcheon Culture Village em Busan, Coreia do Sul', + description: 'Em 2009, a aldeia foi convertida em um centro cultural pintando as casas e apresentando exposições e instalações de arte.', imageId: 'ZfQOOzf' }]; ``` @@ -1020,9 +1020,9 @@ li { -Remove `imageSize` prop from all the components. +Remova a prop `imageSize` de todos os componentes. -Create and export `ImageSizeContext` from `Context.js`. Then wrap the List into `` to pass the value down, and `useContext(ImageSizeContext)` to read it in the `PlaceImage`: +Crie e exporte `ImageSizeContext` de `Context.js`. Em seguida, envolva o List em `` para passar o valor para baixo, e `useContext(ImageSizeContext)` para lê-lo no `PlaceImage`: @@ -1047,7 +1047,7 @@ export default function App() { setIsLarge(e.target.checked); }} /> - Use large images + Usar imagens grandes
@@ -1098,38 +1098,38 @@ export const ImageSizeContext = createContext(500); ```js src/data.js export const places = [{ id: 0, - name: 'Bo-Kaap in Cape Town, South Africa', - description: 'The tradition of choosing bright colors for houses began in the late 20th century.', + name: 'Bo-Kaap em Cape Town, África do Sul', + description: 'A tradição de escolher cores vibrantes para casas começou no final do século 20.', imageId: 'K9HVAGH' }, { id: 1, - name: 'Rainbow Village in Taichung, Taiwan', - description: 'To save the houses from demolition, Huang Yung-Fu, a local resident, painted all 1,200 of them in 1924.', + name: 'Rainbow Village em Taichung, Taiwan', + description: 'Para salvar as casas da demolição, Huang Yung-Fu, um residente local, pintou todas as 1,200 delas em 1924.', imageId: '9EAYZrt' }, { id: 2, - name: 'Macromural de Pachuca, Mexico', - description: 'One of the largest murals in the world covering homes in a hillside neighborhood.', + name: 'Macromural de Pachuca, México', + description: 'Um dos maiores murais do mundo cobrindo casas em um bairro na colina.', imageId: 'DgXHVwu' }, { id: 3, - name: 'Selarón Staircase in Rio de Janeiro, Brazil', - description: 'This landmark was created by Jorge Selarón, a Chilean-born artist, as a "tribute to the Brazilian people".', + name: 'Escada Selarón no Rio de Janeiro, Brasil', + description: 'Este marco foi criado por Jorge Selarón, um artista nascido no Chile, como uma "tributo ao povo brasileiro".', imageId: 'aeO3rpI' }, { id: 4, - name: 'Burano, Italy', - description: 'The houses are painted following a specific color system dating back to 16th century.', + name: 'Burano, Itália', + description: 'As casas são pintadas seguindo um sistema de cores específico que remonta ao século XVI.', imageId: 'kxsph5C' }, { id: 5, - name: 'Chefchaouen, Marocco', - description: 'There are a few theories on why the houses are painted blue, including that the color repels mosquitos or that it symbolizes sky and heaven.', + name: 'Chefchaouen, Marrocos', + description: 'Existem algumas teorias sobre por que as casas são pintadas de azul, incluindo que a cor repele mosquitos ou que simboliza o céu e o paraíso.', imageId: 'rTqKo46' }, { id: 6, - name: 'Gamcheon Culture Village in Busan, South Korea', - description: 'In 2009, the village was converted into a cultural hub by painting the houses and featuring exhibitions and art installations.', + name: 'Gamcheon Culture Village em Busan, Coreia do Sul', + description: 'Em 2009, a aldeia foi convertida em um centro cultural pintando as casas e apresentando exposições e instalações de arte.', imageId: 'ZfQOOzf' }]; ``` @@ -1157,8 +1157,8 @@ li { -Note how components in the middle don't need to pass `imageSize` anymore. +Note como os componentes intermediários não precisam passar `imageSize` mais. - + \ No newline at end of file From 58b8c8344a4744b9011af1979baafbc0bc30176c Mon Sep 17 00:00:00 2001 From: Nivaldo Farias Date: Mon, 20 Jan 2025 11:50:18 -0300 Subject: [PATCH 2/4] Translate `passing-data-deeply-with-context.md` to pt-br --- .../learn/passing-data-deeply-with-context.md | 144 +++++++++--------- 1 file changed, 72 insertions(+), 72 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index d484aad4c..935ec1ada 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -4,33 +4,33 @@ title: Passando Dados Profundamente com Contexto -Normalmente, você passará informações de um componente pai para um componente filho via props. Mas passar props pode se tornar verboso e inconveniente se você tiver que passá-las através de muitos componentes intermediários, ou se muitos componentes em seu aplicativo precisarem da mesma informação. *Contexto* permite que o componente pai torne algumas informações disponíveis para qualquer componente na árvore abaixo dele—não importa quão profundo—sem passá-las explicitamente através de props. +Normalmente, você passará informações de um componente pai para um componente filho via props. Mas passar props pode se tornar verboso e inconveniente se você tiver que passá-las por muitos componentes no meio, ou se muitos componentes em seu aplicativo precisarem da mesma informação. *Contexto* permite que o componente pai torne algumas informações disponíveis para qualquer componente na árvore abaixo dele—não importa quão profundo—sem precisar passá-las explicitamente através de props. - O que é "prop drilling" -- Como substituir a passagem repetitiva de props por contexto +- Como substituir a passagem repetitiva de props com contexto - Casos de uso comuns para contexto - Alternativas comuns ao contexto -## O problema com passar props {/*the-problem-with-passing-props*/} +## O problema com a passagem de props {/*the-problem-with-passing-props*/} -[Passar props](/learn/passing-props-to-a-component) é uma ótima maneira de transportar dados de forma explícita através da sua árvore de UI para os componentes que os utilizam. +[Passar props](/learn/passing-props-to-a-component) é uma ótima maneira de canalizar explicitamente dados através da árvore da sua UI para os componentes que os utilizam. -Mas passar props pode se tornar verboso e inconveniente quando você precisa passar uma prop em profundidade na árvore, ou se muitos componentes precisam da mesma prop. O ancestral comum mais próximo pode estar muito distante dos componentes que precisam de dados, e [elevar o estado](/learn/sharing-state-between-components) dessa forma pode levar a uma situação chamada "prop drilling". +Mas passar props pode se tornar verboso e inconveniente quando você precisa passar alguma prop profundamente pela árvore ou se muitos componentes precisam da mesma prop. O ancestral comum mais próximo pode estar muito afastado dos componentes que precisam de dados, e [elevar estado](/learn/sharing-state-between-components) tão alto pode levar a uma situação chamada "prop drilling". - + -Elevando o estado +Elevando estado - + Prop drilling @@ -38,11 +38,11 @@ Prop drilling -Não seria ótimo se houvesse uma maneira de "teleportar" dados para os componentes na árvore que precisam deles sem passar props? Com o recurso de contexto do React, há! +Não seria ótimo se houvesse uma maneira de "teletransportar" dados para os componentes na árvore que precisam deles sem passar props? Com o recurso de contexto do React, há! -## Contexto: uma alternativa para passar props {/*context-an-alternative-to-passing-props*/} +## Contexto: uma alternativa à passagem de props {/*context-an-alternative-to-passing-props*/} -Contexto permite que um componente pai forneça dados para toda a árvore abaixo dele. Existem muitos usos para o contexto. Aqui está um exemplo. Considere este componente `Heading` que aceita um `level` para seu tamanho: +O contexto permite que um componente pai forneça dados para toda a árvore abaixo dele. Existem muitos usos para o contexto. Aqui está um exemplo. Considere este componente `Heading` que aceita um `level` para seu tamanho: @@ -106,7 +106,7 @@ export default function Heading({ level, children }) { -Vamos supor que você quer que múltiplos cabeçalhos dentro da mesma `Section` sempre tenham o mesmo tamanho: +Vamos supor que você queira que vários cabeçalhos dentro da mesma `Section` tenham sempre o mesmo tamanho: @@ -190,7 +190,7 @@ Atualmente, você passa a prop `level` para cada `` separadamente:
``` -Seria bom se você pudesse passar a prop `level` para o componente `
` em vez e removê-la de ``. Dessa forma, você poderia garantir que todos os cabeçalhos na mesma seção tenham o mesmo tamanho: +Seria bom se você pudesse passar a prop `level` para o componente `
` em vez disso e removê-la do ``. Dessa forma, você poderia garantir que todos os cabeçalhos na mesma seção tenham o mesmo tamanho: ```js
@@ -200,11 +200,11 @@ Seria bom se você pudesse passar a prop `level` para o componente `
` e
``` -Mas como o componente `` pode saber o nível de sua `
` mais próxima? **Isso exigiria alguma forma do filho "pedir" dados de algum lugar acima na árvore.** +Mas como o componente `` saberia o nível de sua `
` mais próxima? **Isso exigiria alguma forma de um filho "pedir" dados de algum lugar acima na árvore.** Você não pode fazer isso apenas com props. É aqui que o contexto entra em cena. Você fará isso em três etapas: -1. **Criar** um contexto. (Você pode chamá-lo de `LevelContext`, já que é para o nível do cabeçalho.) +1. **Criar** um contexto. (Você pode chamá-lo de `LevelContext`, pois é para o nível do cabeçalho.) 2. **Usar** esse contexto a partir do componente que precisa dos dados. (`Heading` usará `LevelContext`.) 3. **Fornecer** esse contexto a partir do componente que especifica os dados. (`Section` fornecerá `LevelContext`.) @@ -212,13 +212,13 @@ O contexto permite que um pai—até mesmo um distante!—forneça alguns dados - + Usando contexto em filhos próximos - + Usando contexto em filhos distantes @@ -228,7 +228,7 @@ Usando contexto em filhos distantes ### Etapa 1: Criar o contexto {/*step-1-create-the-context*/} -Primeiro, você precisa criar o contexto. Você precisará **exportá-lo de um arquivo** para que seus componentes possam usá-lo: +Primeiro, você precisa criar o contexto. Você vai precisar **exportá-lo de um arquivo** para que seus componentes possam usá-lo: @@ -308,7 +308,7 @@ export const LevelContext = createContext(1); -O único argumento para `createContext` é o valor _default_. Aqui, `1` se refere ao maior nível de cabeçalho, mas você pode passar qualquer tipo de valor (até mesmo um objeto). Você verá a significância do valor default na próxima etapa. +O único argumento para `createContext` é o _valor padrão_. Aqui, `1` refere-se ao nível de cabeçalho mais alto, mas você poderia passar qualquer tipo de valor (até mesmo um objeto). Você verá a importância do valor padrão na próxima etapa. ### Etapa 2: Usar o contexto {/*step-2-use-the-context*/} @@ -319,7 +319,7 @@ import { useContext } from 'react'; import { LevelContext } from './LevelContext.js'; ``` -Atualmente, o componente `Heading` lê `level` das props: +Atualmente, o componente `Heading` lê `level` de props: ```js export default function Heading({ level, children }) { @@ -336,9 +336,9 @@ export default function Heading({ children }) { } ``` -`useContext` é um Hook. Assim como `useState` e `useReducer`, você só pode chamar um Hook imediatamente dentro de um componente React (não dentro de loops ou condições). **`useContext` informa ao React que o componente `Heading` quer ler o `LevelContext`.** +`useContext` é um Hook. Assim como `useState` e `useReducer`, você só pode chamar um Hook imediatamente dentro de um componente React (não dentro de loops ou condições). **`useContext` informa ao React que o componente `Heading` deseja ler o `LevelContext`.** -Agora que o componente `Heading` não tem uma prop `level`, você não precisa passar a prop de nível para `Heading` em seu JSX assim: +Agora que o componente `Heading` não tem uma prop `level`, você não precisa passar a prop de nível para `Heading` no seu JSX assim: ```js
@@ -348,7 +348,7 @@ Agora que o componente `Heading` não tem uma prop `level`, você não precisa p
``` -Atualize o JSX para que seja a `Section` que a receba em vez: +Atualize o JSX para que seja a `Section` que receba: ```jsx
@@ -442,9 +442,9 @@ export const LevelContext = createContext(1); -Observe que este exemplo ainda não funciona corretamente! Todos os cabeçalhos têm o mesmo tamanho porque **mesmo que você *use* o contexto, você ainda não *forneceu* ele.** O React não sabe de onde obtê-lo! +Observe que este exemplo ainda não funciona! Todos os cabeçalhos têm o mesmo tamanho porque **mesmo que você *esteja usando* o contexto, você ainda não o *forneceu*.** O React não sabe de onde obtê-lo! -Se você não fornecer o contexto, o React usará o valor default que você especificou na etapa anterior. Neste exemplo, você especificou `1` como o argumento para `createContext`, então `useContext(LevelContext)` retorna `1`, definindo todos aqueles cabeçalhos como `

`. Vamos corrigir esse problema fazendo com que cada `Section` forneça seu próprio contexto. +Se você não fornecer o contexto, o React usará o valor padrão que você especificou na etapa anterior. Neste exemplo, você especificou `1` como argumento para `createContext`, então `useContext(LevelContext)` retorna `1`, definindo todos esses cabeçalhos como `

`. Vamos corrigir esse problema fazendo com que cada `Section` forneça seu próprio contexto. ### Etapa 3: Fornecer o contexto {/*step-3-provide-the-context*/} @@ -476,7 +476,7 @@ export default function Section({ level, children }) { } ``` -Isso informa ao React: "se algum componente dentro deste `
` pedir o `LevelContext`, forneça a ele esse `level`." O componente usará o valor do mais próximo `` na árvore de UI acima dele. +Isso informa ao React: "se algum componente dentro deste `
` solicitar `LevelContext`, forneça a ele este `level`." O componente usará o valor do mais próximo `` acima dele na árvore da UI. @@ -564,11 +564,11 @@ export const LevelContext = createContext(1); -É o mesmo resultado que o código original, mas você não precisou passar a prop `level` para cada componente `Heading`! Em vez disso, ele "descobre" seu nível de cabeçalho perguntando o mais próximo `Section` acima: +É o mesmo resultado que o código original, mas você não precisou passar a prop `level` para cada componente `Heading`! Em vez disso, ele "descobre" seu nível de cabeçalho perguntando ao mais próximo `Section` acima: -1. Você passa uma prop `level` para a `
`. +1. Você passa uma prop `level` para o `
`. 2. `Section` envolve seus filhos em ``. -3. `Heading` pergunta o valor mais próximo de `LevelContext` acima com `useContext(LevelContext)`. +3. `Heading` pergunta ao valor mais próximo de `LevelContext` acima com `useContext(LevelContext)`. ## Usando e fornecendo contexto do mesmo componente {/*using-and-providing-context-from-the-same-component*/} @@ -585,7 +585,7 @@ export default function Page() { ... ``` -Como o contexto permite que você leia informações de um componente acima, cada `Section` poderia ler o `level` da `Section` acima e passar `level + 1` automaticamente. Aqui está como você poderia fazer isso: +Como o contexto permite que você leia informações de um componente acima, cada `Section` poderia ler o `level` da `Section` acima e passar `level + 1` para baixo automaticamente. Aqui está como você poderia fazer isso: ```js src/Section.js {5,8} import { useContext } from 'react'; @@ -603,7 +603,7 @@ export default function Section({ children }) { } ``` -Com essa mudança, você não precisa passar a prop `level` *nem* para a `
` nem para a ``: +Com essa mudança, você não precisa passar a prop `level` *nem* para o `
` nem para o ``: @@ -695,19 +695,19 @@ export const LevelContext = createContext(0); -Agora tanto `Heading` quanto `Section` leem o `LevelContext` para descobrir quão "profunda" elas estão. E a `Section` envolve seus filhos no `LevelContext` para especificar que qualquer coisa dentro dela está em um nível "mais profundo". +Agora, tanto `Heading` quanto `Section` leem o `LevelContext` para descobrir quão "profundos" estão. E a `Section` envolve seus filhos no `LevelContext` para especificar que qualquer coisa dentro dela está em um nível "mais profundo". -Este exemplo usa níveis de cabeçalho porque eles mostram visualmente como os componentes aninhados podem substituir o contexto. Mas o contexto é útil para muitos outros casos de uso também. Você pode passar qualquer informação necessária para toda a subárvore: o tema de cor atual, o usuário logado atualmente, e assim por diante. +Este exemplo usa níveis de cabeçalho porque eles mostram visualmente como componentes aninhados podem sobrescrever o contexto. Mas o contexto é útil para muitos outros casos de uso também. Você pode passar qualquer informação necessária para toda a subárvore: o tema de cor atual, o usuário atualmente conectado, e assim por diante. -## O contexto passa através de componentes intermediários {/*context-passes-through-intermediate-components*/} +## O contexto passa por componentes intermediários {/*context-passes-through-intermediate-components*/} -Você pode inserir quantos componentes quiser entre o componente que fornece contexto e aquele que o utiliza. Isso inclui tanto componentes embutidos como `
` quanto componentes que você pode construir. +Você pode inserir quantos componentes desejar entre o componente que fornece contexto e aquele que o utiliza. Isso inclui tanto componentes incorporados como `
` quanto componentes que você pode construir. -Neste exemplo, o mesmo componente `Post` (com uma borda tracejada) é renderizado em dois níveis de aninhamento diferentes. Note que o `` dentro dele obtém seu nível automaticamente do mais próximo `
`: +Neste exemplo, o mesmo componente `Post` (com uma borda tracejada) é renderizado em dois níveis de aninhamento diferentes. Observe que o `` dentro dele obtém seu nível automaticamente da `
` mais próxima: @@ -747,7 +747,7 @@ function RecentPosts() { />
); @@ -832,58 +832,58 @@ export const LevelContext = createContext(0); -Você não fez nada especial para que isso funcionasse. Um `Section` especifica o contexto para a árvore dentro dele, então você pode inserir um `` em qualquer lugar, e ele terá o tamanho correto. Experimente no sandbox acima! +Você não fez nada de especial para que isso funcionasse. Uma `Section` especifica o contexto para a árvore dentro dela, então você pode inserir um `` em qualquer lugar, e ele terá o tamanho correto. Experimente no sandbox acima! -**O contexto permite que você escreva componentes que "se adaptam ao seu ambiente" e se apresentem de forma diferente dependendo de _onde_ (ou, em outras palavras, _em que contexto_) eles estão sendo renderizados.** +**O contexto permite que você escreva componentes que "se adaptam ao seu redor" e se exibam de maneira diferente dependendo de _onde_ (ou seja, _em que contexto_) estão sendo renderizados.** -Como o contexto funciona pode lembrar você da [herança de propriedades CSS.](https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance) No CSS, você pode especificar `color: blue` para um `
`, e qualquer nó DOM dentro dele, não importa quão profundo, herdará essa cor a menos que algum outro nó DOM no meio a sobrescreva com `color: green`. Similarmente, no React, a única maneira de substituir algum contexto vindo de cima é envolver os filhos em um provedor de contexto com um valor diferente. +Como o funcionamento do contexto pode lembrar você de [herança de propriedades CSS.](https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance) No CSS, você pode especificar `color: blue` para um `
`, e qualquer nó DOM dentro dele, não importa quão profundo, herdará essa cor, a menos que algum outro nó DOM no meio sobrescreva com `color: green`. De forma semelhante, no React, a única maneira de sobrescrever algum contexto vindo de cima é envolver filhos em um provedor de contexto com um valor diferente. -No CSS, propriedades diferentes como `color` e `background-color` não se sobrescrevem. Você pode definir a cor de todos os `
`s como vermelha sem afetar a `background-color`. Da mesma forma, **diferentes contextos do React não se sobrescrevem.** Cada contexto que você cria com `createContext()` é completamente separado de outros, e une componentes que usam e fornecem *aquele particular* contexto. Um componente pode usar ou fornecer muitos contextos diferentes sem problemas. +Em CSS, propriedades diferentes como `color` e `background-color` não sobrescrevem umas às outras. Você pode definir todos os `color` do `
` como vermelho sem afetar o `background-color`. Similarmente, **diferentes contextos React não se sobrepõem.** Cada contexto que você faz com `createContext()` é completamente separado de outros e liga componentes que usam e fornecem *aquele contexto específico*. Um componente pode usar ou fornecer muitos contextos diferentes sem problemas. ## Antes de usar contexto {/*before-you-use-context*/} -O contexto é muito tentador para usar! No entanto, isso também significa que é fácil demais abusar dele. **Só porque você precisa passar algumas props por vários níveis profundos, não significa que você deve colocar essa informação em contexto.** +O contexto é muito tentador de usar! No entanto, isso também significa que é fácil em demasia sobrecarregá-lo. **Apenas porque você precisa passar algumas props vários níveis abaixo, isso não significa que você deve colocar essas informações em contexto.** Aqui estão algumas alternativas que você deve considerar antes de usar contexto: -1. **Comece passando [props.](/learn/passing-props-to-a-component)** Se seus componentes não forem triviais, não é incomum passar uma dúzia de props por uma dúzia de componentes. Pode parecer cansativo, mas isso deixa muito claro quais componentes usam quais dados! A pessoa que mantém seu código ficará feliz que você tornou o fluxo de dados explícito com props. -2. **Extraia componentes e [passe JSX como `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) para eles.** Se você passar alguns dados através de muitas camadas de componentes intermediários que não usam esses dados (e apenas os passam para baixo), isso muitas vezes significa que você esqueceu de extrair alguns componentes ao longo do caminho. Por exemplo, talvez você passe props de dados como `posts` para componentes visuais que não os usam diretamente, como ``. Em vez disso, faça com que `Layout` aceite `children` como uma prop, e renderize ``. Isso reduz o número de camadas entre o componente que especifica os dados e aquele que precisa deles. +1. **Comece passando [props.](/learn/passing-props-to-a-component)** Se seus componentes não forem triviais, não é incomum passar uma dúzia de props através de uma dúzia de componentes. Pode parecer um fardo, mas isso deixa muito claro quais componentes usam quais dados! A pessoa que mantiver seu código ficará feliz que você deixou o fluxo de dados explícito com props. +2. **Extraia componentes e [passe JSX como `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) para eles.** Se você passar alguns dados através de muitas camadas de componentes intermediários que não usam esses dados (e apenas os passam ainda mais para baixo), isso geralmente significa que você esqueceu de extrair alguns componentes ao longo do caminho. Por exemplo, talvez você passe dados props como `posts` para componentes visuais que não os utilizam diretamente, como ``. Em vez disso, faça com que `Layout` aceite `children` como uma prop e renderize ``. Isso reduz o número de camadas entre o componente que especifica os dados e aquele que precisa deles. Se nenhuma dessas abordagens funcionar bem para você, considere o contexto. ## Casos de uso para contexto {/*use-cases-for-context*/} -* **Temas:** Se seu aplicativo permite que o usuário mude sua aparência (por exemplo, modo escuro), você pode colocar um provedor de contexto no topo do seu aplicativo e usar esse contexto em componentes que precisam ajustar sua aparência visual. -* **Conta atual:** Muitos componentes podem precisar saber quem é o usuário atualmente logado. Colocá-lo em contexto torna conveniente lê-lo em qualquer lugar na árvore. Alguns aplicativos também permitem que você opere várias contas ao mesmo tempo (por exemplo, para deixar um comentário como um usuário diferente). Nesses casos, pode ser conveniente envolver uma parte da UI em um provedor aninhado com um valor de conta atual diferente. -* **Roteamento:** A maioria das soluções de roteamento usa contexto internamente para manter a rota atual. É assim que cada link "sabe" se está ativo ou não. Se você construir seu próprio roteador, talvez queira fazer o mesmo. -* **Gerenciamento de estado:** À medida que seu aplicativo cresce, você pode acabar com muitos estados mais perto do topo do seu aplicativo. Muitos componentes distantes abaixo podem querer alterá-lo. É comum [usar um redutor junto com contexto](/learn/scaling-up-with-reducer-and-context) para gerenciar estados complexos e passá-los para componentes distantes sem muita complicação. - -O contexto não está limitado a valores estáticos. Se você passar um valor diferente na próxima renderização, o React atualizará todos os componentes que o estiverem lendo abaixo! É por isso que o contexto é frequentemente usado em combinação com estado. +* **Tematização:** Se o seu aplicativo permite que o usuário mude sua aparência (por exemplo, modo escuro), você pode colocar um provedor de contexto no topo do seu aplicativo e usar esse contexto nos componentes que precisam ajustar sua aparência visual. +* **Conta atual:** Muitos componentes podem precisar saber qual o usuário atualmente logado. Colocá-lo em contexto torna conveniente lê-lo em qualquer lugar da árvore. Alguns aplicativos também permitem que você opere várias contas ao mesmo tempo (por exemplo, para deixar um comentário como um usuário diferente). Nesses casos, pode ser conveniente envolver uma parte da UI em um provedor aninhado com um valor de conta atual diferente. +* **Roteamento:** A maioria das soluções de roteamento usa contexto internamente para manter a rota atual. É assim que cada link "sabe" se está ativo ou não. Se você construir seu próprio roteador, pode querer fazer isso também. +* **Gerenciamento de estado:** À medida que seu aplicativo cresce, você pode acabar com muitos estados mais próximos ao topo do seu aplicativo. Muitos componentes distantes abaixo podem querer mudá-lo. É comum [usar um redutor em conjunto com o contexto](/learn/scaling-up-with-reducer-and-context) para gerenciar estados complexos e passá-los para baixo para componentes distantes sem muito esforço. -Em geral, se alguma informação é necessária por componentes distantes em diferentes partes da árvore, é um bom indicativo de que o contexto ajudará você. +O contexto não se limita a valores estáticos. Se você passar um valor diferente na próxima renderização, o React atualizará todos os componentes que o lêem abaixo! É por isso que o contexto é frequentemente usado em combinação com o estado. + +Em geral, se algumas informações são necessárias por componentes distantes em diferentes partes da árvore, é uma boa indicação de que o contexto pode ajudá-lo. * O contexto permite que um componente forneça algumas informações para toda a árvore abaixo dele. * Para passar contexto: - 1. Crie e exporte-o com `export const MyContext = createContext(defaultValue)`. - 2. Passe-o para o Hook `useContext(MyContext)` para lê-lo em qualquer componente filho, não importa quão profundo. - 3. Envolva os filhos em `` para fornecê-lo de um pai. + 1. Crie e exporte com `export const MyContext = createContext(defaultValue)`. + 2. Passe para o Hook `useContext(MyContext)` para lê-lo em qualquer componente filho, não importando quão profundo. + 3. Envolva filhos em `` para fornecê-lo a partir de um pai. * O contexto passa através de qualquer componente no meio. -* O contexto permite que você escreva componentes que "se adaptam ao seu entorno". -* Antes de usar o contexto, tente passar props ou passar JSX como `children`. +* O contexto permite que você escreva componentes que "se adaptam ao seu redor". +* Antes de usar contexto, tente passar props ou passar JSX como `children`. -#### Substitua o prop drilling por contexto {/*replace-prop-drilling-with-context*/} +#### Substitua o prop drilling pelo contexto {/*replace-prop-drilling-with-context*/} Neste exemplo, alternar a caixa de seleção muda a prop `imageSize` passada para cada ``. O estado da caixa de seleção é mantido no componente `App` de nível superior, mas cada `` precisa estar ciente disso. -Atualmente, `App` passa `imageSize` para `List`, que o passa para cada `Place`, que o passa para o `PlaceImage`. Remova a prop `imageSize`, e em vez disso a passe diretamente do componente `App` para o `PlaceImage`. +Atualmente, o `App` passa `imageSize` para `List`, que passa para cada `Place`, que passa para o `PlaceImage`. Remova a prop `imageSize` e, em vez disso, passe-a do componente `App` diretamente para o `PlaceImage`. -Você pode declarar contexto em `Context.js`. +Você pode declarar o contexto em `Context.js`. @@ -960,27 +960,27 @@ function PlaceImage({ place, imageSize }) { export const places = [{ id: 0, name: 'Bo-Kaap em Cape Town, África do Sul', - description: 'A tradição de escolher cores vibrantes para casas começou no final do século 20.', + description: 'A tradição de escolher cores brilhantes para casas começou no final do século 20.', imageId: 'K9HVAGH' }, { id: 1, name: 'Rainbow Village em Taichung, Taiwan', - description: 'Para salvar as casas da demolição, Huang Yung-Fu, um residente local, pintou todas as 1,200 delas em 1924.', + description: 'Para salvar as casas da demolição, Huang Yung-Fu, um residente local, pintou todas as 1.200 delas em 1924.', imageId: '9EAYZrt' }, { id: 2, name: 'Macromural de Pachuca, México', - description: 'Um dos maiores murais do mundo cobrindo casas em um bairro na colina.', + description: 'Um dos maiores murais do mundo cobrindo casas em um bairro em colina.', imageId: 'DgXHVwu' }, { id: 3, - name: 'Escada Selarón no Rio de Janeiro, Brasil', - description: 'Este marco foi criado por Jorge Selarón, um artista nascido no Chile, como uma "tributo ao povo brasileiro."', + name: 'Escadaria Selarón no Rio de Janeiro, Brasil', + description: 'Este marco foi criado por Jorge Selarón, um artista chileno, como um "tributo ao povo brasileiro."', imageId: 'aeO3rpI' }, { id: 4, name: 'Burano, Itália', - description: 'As casas são pintadas seguindo um sistema de cores específico que remonta ao século XVI.', + description: 'As casas são pintadas seguindo um sistema de cores específico que data do século 16.', imageId: 'kxsph5C' }, { id: 5, @@ -1022,7 +1022,7 @@ li { Remova a prop `imageSize` de todos os componentes. -Crie e exporte `ImageSizeContext` de `Context.js`. Em seguida, envolva o List em `` para passar o valor para baixo, e `useContext(ImageSizeContext)` para lê-lo no `PlaceImage`: +Crie e exporte `ImageSizeContext` de `Context.js`. Em seguida, envolva a List em `` para passar o valor para baixo e use `useContext(ImageSizeContext)` para lê-lo no `PlaceImage`: @@ -1099,27 +1099,27 @@ export const ImageSizeContext = createContext(500); export const places = [{ id: 0, name: 'Bo-Kaap em Cape Town, África do Sul', - description: 'A tradição de escolher cores vibrantes para casas começou no final do século 20.', + description: 'A tradição de escolher cores brilhantes para casas começou no final do século 20.', imageId: 'K9HVAGH' }, { id: 1, name: 'Rainbow Village em Taichung, Taiwan', - description: 'Para salvar as casas da demolição, Huang Yung-Fu, um residente local, pintou todas as 1,200 delas em 1924.', + description: 'Para salvar as casas da demolição, Huang Yung-Fu, um residente local, pintou todas as 1.200 delas em 1924.', imageId: '9EAYZrt' }, { id: 2, name: 'Macromural de Pachuca, México', - description: 'Um dos maiores murais do mundo cobrindo casas em um bairro na colina.', + description: 'Um dos maiores murais do mundo cobrindo casas em um bairro em colina.', imageId: 'DgXHVwu' }, { id: 3, - name: 'Escada Selarón no Rio de Janeiro, Brasil', - description: 'Este marco foi criado por Jorge Selarón, um artista nascido no Chile, como uma "tributo ao povo brasileiro".', + name: 'Escadaria Selarón no Rio de Janeiro, Brasil', + description: 'Este marco foi criado por Jorge Selarón, um artista chileno, como um "tributo ao povo brasileiro".', imageId: 'aeO3rpI' }, { id: 4, name: 'Burano, Itália', - description: 'As casas são pintadas seguindo um sistema de cores específico que remonta ao século XVI.', + description: 'As casas são pintadas seguindo um sistema de cores específico que data do século 16.', imageId: 'kxsph5C' }, { id: 5, From 9a1a776b3d1dd2130a0e0aa946415b91987a3adb Mon Sep 17 00:00:00 2001 From: Nivaldo Farias Date: Mon, 20 Jan 2025 12:50:28 -0300 Subject: [PATCH 3/4] Translate `passing-data-deeply-with-context.md` to pt-br --- .../learn/passing-data-deeply-with-context.md | 134 +++++++++--------- 1 file changed, 67 insertions(+), 67 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 935ec1ada..4c00c5174 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -4,14 +4,14 @@ title: Passando Dados Profundamente com Contexto -Normalmente, você passará informações de um componente pai para um componente filho via props. Mas passar props pode se tornar verboso e inconveniente se você tiver que passá-las por muitos componentes no meio, ou se muitos componentes em seu aplicativo precisarem da mesma informação. *Contexto* permite que o componente pai torne algumas informações disponíveis para qualquer componente na árvore abaixo dele—não importa quão profundo—sem precisar passá-las explicitamente através de props. +Normalmente, você irá passar informações de um componente pai para um componente filho através de props. Mas passar props pode se tornar verboso e inconveniente se você precisar passá-las por muitos componentes intermediários ou se muitos componentes em seu aplicativo precisarem da mesma informação. *Contexto* permite que o componente pai disponibilize algumas informações para qualquer componente na árvore abaixo dele—não importa quão profundo—sem passá-las explicitamente por props. - O que é "prop drilling" -- Como substituir a passagem repetitiva de props com contexto +- Como substituir a passagem repetitiva de props por contexto - Casos de uso comuns para contexto - Alternativas comuns ao contexto @@ -19,18 +19,18 @@ Normalmente, você passará informações de um componente pai para um component ## O problema com a passagem de props {/*the-problem-with-passing-props*/} -[Passar props](/learn/passing-props-to-a-component) é uma ótima maneira de canalizar explicitamente dados através da árvore da sua UI para os componentes que os utilizam. +[Passar props](/learn/passing-props-to-a-component) é uma ótima maneira de canalizar explicitamente dados através da sua árvore UI para os componentes que os utilizam. -Mas passar props pode se tornar verboso e inconveniente quando você precisa passar alguma prop profundamente pela árvore ou se muitos componentes precisam da mesma prop. O ancestral comum mais próximo pode estar muito afastado dos componentes que precisam de dados, e [elevar estado](/learn/sharing-state-between-components) tão alto pode levar a uma situação chamada "prop drilling". +Mas passar props pode se tornar verboso e inconveniente quando você precisa passar uma prop profundamente pela árvore, ou se muitos componentes precisam da mesma prop. O ancestral comum mais próximo pode estar muito afastado dos componentes que precisam dos dados, e [levantar o estado](/learn/sharing-state-between-components) tão alto pode levar a uma situação chamada "prop drilling". - + -Elevando estado +Levantando o estado - + Prop drilling @@ -106,7 +106,7 @@ export default function Heading({ level, children }) { -Vamos supor que você queira que vários cabeçalhos dentro da mesma `Section` tenham sempre o mesmo tamanho: +Suponha que você queira que vários cabeçalhos dentro da mesma `Section` tenham sempre o mesmo tamanho: @@ -190,7 +190,7 @@ Atualmente, você passa a prop `level` para cada `` separadamente:
``` -Seria bom se você pudesse passar a prop `level` para o componente `
` em vez disso e removê-la do ``. Dessa forma, você poderia garantir que todos os cabeçalhos na mesma seção tenham o mesmo tamanho: +Seria bom se você pudesse passar a prop `level` para o componente `
` em vez disso e removê-la do ``. Desta forma, você poderia garantir que todos os cabeçalhos na mesma seção tivessem o mesmo tamanho: ```js
@@ -200,11 +200,11 @@ Seria bom se você pudesse passar a prop `level` para o componente `
` e
``` -Mas como o componente `` saberia o nível de sua `
` mais próxima? **Isso exigiria alguma forma de um filho "pedir" dados de algum lugar acima na árvore.** +Mas como o componente `` saberia o nível de sua `
` mais próxima? **Isso exigiria alguma maneira de um filho "perguntar" por dados de algum lugar acima na árvore.** -Você não pode fazer isso apenas com props. É aqui que o contexto entra em cena. Você fará isso em três etapas: +Você não pode fazer isso apenas com props. É aqui que o contexto entra em jogo. Você fará isso em três etapas: -1. **Criar** um contexto. (Você pode chamá-lo de `LevelContext`, pois é para o nível do cabeçalho.) +1. **Criar** um contexto. (Você pode chamá-lo de `LevelContext`, já que é para o nível do cabeçalho.) 2. **Usar** esse contexto a partir do componente que precisa dos dados. (`Heading` usará `LevelContext`.) 3. **Fornecer** esse contexto a partir do componente que especifica os dados. (`Section` fornecerá `LevelContext`.) @@ -218,7 +218,7 @@ Usando contexto em filhos próximos - + Usando contexto em filhos distantes @@ -228,7 +228,7 @@ Usando contexto em filhos distantes ### Etapa 1: Criar o contexto {/*step-1-create-the-context*/} -Primeiro, você precisa criar o contexto. Você vai precisar **exportá-lo de um arquivo** para que seus componentes possam usá-lo: +Primeiro, você precisa criar o contexto. Você precisará **exportá-lo de um arquivo** para que seus componentes possam usá-lo: @@ -308,7 +308,7 @@ export const LevelContext = createContext(1); -O único argumento para `createContext` é o _valor padrão_. Aqui, `1` refere-se ao nível de cabeçalho mais alto, mas você poderia passar qualquer tipo de valor (até mesmo um objeto). Você verá a importância do valor padrão na próxima etapa. +O único argumento para `createContext` é o _valor padrão_. Aqui, `1` se refere ao maior nível de cabeçalho, mas você poderia passar qualquer tipo de valor (até mesmo um objeto). Você verá a importância do valor padrão na próxima etapa. ### Etapa 2: Usar o contexto {/*step-2-use-the-context*/} @@ -319,7 +319,7 @@ import { useContext } from 'react'; import { LevelContext } from './LevelContext.js'; ``` -Atualmente, o componente `Heading` lê `level` de props: +Atualmente, o componente `Heading` lê `level` a partir das props: ```js export default function Heading({ level, children }) { @@ -338,7 +338,7 @@ export default function Heading({ children }) { `useContext` é um Hook. Assim como `useState` e `useReducer`, você só pode chamar um Hook imediatamente dentro de um componente React (não dentro de loops ou condições). **`useContext` informa ao React que o componente `Heading` deseja ler o `LevelContext`.** -Agora que o componente `Heading` não tem uma prop `level`, você não precisa passar a prop de nível para `Heading` no seu JSX assim: +Agora que o componente `Heading` não possui uma prop `level`, você não precisa passar a prop level para `Heading` em seu JSX assim: ```js
@@ -348,7 +348,7 @@ Agora que o componente `Heading` não tem uma prop `level`, você não precisa p
``` -Atualize o JSX para que seja a `Section` que receba: +Atualize o JSX para que agora seja a `Section` que recebe isso: ```jsx
@@ -442,9 +442,9 @@ export const LevelContext = createContext(1); -Observe que este exemplo ainda não funciona! Todos os cabeçalhos têm o mesmo tamanho porque **mesmo que você *esteja usando* o contexto, você ainda não o *forneceu*.** O React não sabe de onde obtê-lo! +Observe que este exemplo ainda não funciona muito bem! Todos os cabeçalhos têm o mesmo tamanho porque **embora você esteja *usando* o contexto, você ainda não o *forneceu*.** O React não sabe onde obtê-lo! -Se você não fornecer o contexto, o React usará o valor padrão que você especificou na etapa anterior. Neste exemplo, você especificou `1` como argumento para `createContext`, então `useContext(LevelContext)` retorna `1`, definindo todos esses cabeçalhos como `

`. Vamos corrigir esse problema fazendo com que cada `Section` forneça seu próprio contexto. +Se você não fornecer o contexto, o React usará o valor padrão que você especificou na etapa anterior. Neste exemplo, você especificou `1` como argumento para `createContext`, então `useContext(LevelContext)` retorna `1`, definindo todos aqueles cabeçalhos como `

`. Vamos corrigir esse problema fazendo com que cada `Section` forneça seu próprio contexto. ### Etapa 3: Fornecer o contexto {/*step-3-provide-the-context*/} @@ -476,7 +476,7 @@ export default function Section({ level, children }) { } ``` -Isso informa ao React: "se algum componente dentro deste `
` solicitar `LevelContext`, forneça a ele este `level`." O componente usará o valor do mais próximo `` acima dele na árvore da UI. +Isso diz ao React: "se algum componente dentro deste `
` perguntar por `LevelContext`, dê a ele este `level`." O componente usará o valor do mais próximo `` na árvore UI acima dele. @@ -564,15 +564,15 @@ export const LevelContext = createContext(1); -É o mesmo resultado que o código original, mas você não precisou passar a prop `level` para cada componente `Heading`! Em vez disso, ele "descobre" seu nível de cabeçalho perguntando ao mais próximo `Section` acima: +É o mesmo resultado que o código original, mas você não precisava passar a prop `level` para cada componente `Heading`! Em vez disso, ele "descobre" seu nível de cabeçalho perguntando ao mais próximo `Section` acima: -1. Você passa uma prop `level` para o `
`. +1. Você passa uma prop `level` para a `
`. 2. `Section` envolve seus filhos em ``. -3. `Heading` pergunta ao valor mais próximo de `LevelContext` acima com `useContext(LevelContext)`. +3. `Heading` pergunta o valor mais próximo de `LevelContext` acima com `useContext(LevelContext)`. ## Usando e fornecendo contexto do mesmo componente {/*using-and-providing-context-from-the-same-component*/} -Atualmente, você ainda precisa especificar o `level` de cada seção manualmente: +Atualmente, você ainda precisa especificar manualmente o `level` de cada seção: ```js export default function Page() { @@ -585,7 +585,7 @@ export default function Page() { ... ``` -Como o contexto permite que você leia informações de um componente acima, cada `Section` poderia ler o `level` da `Section` acima e passar `level + 1` para baixo automaticamente. Aqui está como você poderia fazer isso: +Como o contexto permite que você leia informações de um componente acima, cada `Section` poderia ler o `level` da `Section` acima e passar `level + 1` automaticamente. Aqui está como você poderia fazer isso: ```js src/Section.js {5,8} import { useContext } from 'react'; @@ -603,7 +603,7 @@ export default function Section({ children }) { } ``` -Com essa mudança, você não precisa passar a prop `level` *nem* para o `
` nem para o ``: +Com essa mudança, você não precisa passar a prop `level` *nem* para a `
` *nem* para a ``: @@ -695,19 +695,19 @@ export const LevelContext = createContext(0); -Agora, tanto `Heading` quanto `Section` leem o `LevelContext` para descobrir quão "profundos" estão. E a `Section` envolve seus filhos no `LevelContext` para especificar que qualquer coisa dentro dela está em um nível "mais profundo". +Agora tanto `Heading` quanto `Section` leem o `LevelContext` para descobrir quão "profundos" eles estão. E a `Section` envolve seus filhos no `LevelContext` para especificar que qualquer coisa dentro dela está em um nível "mais profundo". -Este exemplo usa níveis de cabeçalho porque eles mostram visualmente como componentes aninhados podem sobrescrever o contexto. Mas o contexto é útil para muitos outros casos de uso também. Você pode passar qualquer informação necessária para toda a subárvore: o tema de cor atual, o usuário atualmente conectado, e assim por diante. +Este exemplo usa níveis de cabeçalho porque eles mostram visualmente como componentes aninhados podem sobrescrever o contexto. Mas o contexto é útil para muitos outros casos de uso também. Você pode passar qualquer informação necessária para toda a subtree: o tema de cores atual, o usuário atualmente logado, e assim por diante. -## O contexto passa por componentes intermediários {/*context-passes-through-intermediate-components*/} +## O contexto passa através de componentes intermediários {/*context-passes-through-intermediate-components*/} -Você pode inserir quantos componentes desejar entre o componente que fornece contexto e aquele que o utiliza. Isso inclui tanto componentes incorporados como `
` quanto componentes que você pode construir. +Você pode inserir quantos componentes quiser entre o componente que fornece contexto e aquele que o usa. Isso inclui tanto componentes integrados como `
` quanto componentes que você pode construir. -Neste exemplo, o mesmo componente `Post` (com uma borda tracejada) é renderizado em dois níveis de aninhamento diferentes. Observe que o `` dentro dele obtém seu nível automaticamente da `
` mais próxima: +Neste exemplo, o mesmo componente `Post` (com uma borda tracejada) é renderizado em dois níveis de aninhamento diferentes. Note que o `` dentro dele obtém seu nível automaticamente do mais próximo `
`: @@ -731,7 +731,7 @@ export default function ProfilePage() { function AllPosts() { return (
- Posts + Postagens
); @@ -740,14 +740,14 @@ function AllPosts() { function RecentPosts() { return (
- Posts Recentes + Postagens Recentes
); @@ -832,45 +832,45 @@ export const LevelContext = createContext(0); -Você não fez nada de especial para que isso funcionasse. Uma `Section` especifica o contexto para a árvore dentro dela, então você pode inserir um `` em qualquer lugar, e ele terá o tamanho correto. Experimente no sandbox acima! +Você não fez nada especial para isso funcionar. Um `Section` especifica o contexto para a árvore dentro dele, então você pode inserir um `` em qualquer lugar, e ele terá o tamanho correto. Experimente no sandbox acima! -**O contexto permite que você escreva componentes que "se adaptam ao seu redor" e se exibam de maneira diferente dependendo de _onde_ (ou seja, _em que contexto_) estão sendo renderizados.** +**O contexto permite que você escreva componentes que "se adaptam ao seu ambiente" e se exibem de forma diferente dependendo de _onde_ (ou seja, _em qual contexto_) estão sendo renderizados.** -Como o funcionamento do contexto pode lembrar você de [herança de propriedades CSS.](https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance) No CSS, você pode especificar `color: blue` para um `
`, e qualquer nó DOM dentro dele, não importa quão profundo, herdará essa cor, a menos que algum outro nó DOM no meio sobrescreva com `color: green`. De forma semelhante, no React, a única maneira de sobrescrever algum contexto vindo de cima é envolver filhos em um provedor de contexto com um valor diferente. +Como o contexto funciona pode lembrar você da [herança de propriedades CSS.](https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance) No CSS, você pode especificar `color: blue` para um `
`, e qualquer nó DOM dentro dele, não importa quão profundo, herdará essa cor, a menos que algum outro nó DOM no meio sobrescreva isso com `color: green`. Da mesma forma, no React, a única maneira de sobrescrever algum contexto vindo de cima é envolver os filhos em um provedor de contexto com um valor diferente. -Em CSS, propriedades diferentes como `color` e `background-color` não sobrescrevem umas às outras. Você pode definir todos os `color` do `
` como vermelho sem afetar o `background-color`. Similarmente, **diferentes contextos React não se sobrepõem.** Cada contexto que você faz com `createContext()` é completamente separado de outros e liga componentes que usam e fornecem *aquele contexto específico*. Um componente pode usar ou fornecer muitos contextos diferentes sem problemas. +Em CSS, propriedades diferentes como `color` e `background-color` não se sobrescrevem. Você pode definir todas as `div`s `color` para vermelho sem impactar `background-color`. De maneira similar, **diferentes contextos React não se sobrescrevem.** Cada contexto que você faz com `createContext()` é completamente separado de outros e conecta componentes que usam e fornecem *aquele contexto específico*. Um componente pode usar ou fornecer muitos contextos diferentes sem problemas. ## Antes de usar contexto {/*before-you-use-context*/} -O contexto é muito tentador de usar! No entanto, isso também significa que é fácil em demasia sobrecarregá-lo. **Apenas porque você precisa passar algumas props vários níveis abaixo, isso não significa que você deve colocar essas informações em contexto.** +O contexto é muito tentador de usar! No entanto, isso também significa que é fácil demais abusar dele. **Só porque você precisa passar algumas props em vários níveis profundos não significa que você deve colocar essas informações em contexto.** Aqui estão algumas alternativas que você deve considerar antes de usar contexto: -1. **Comece passando [props.](/learn/passing-props-to-a-component)** Se seus componentes não forem triviais, não é incomum passar uma dúzia de props através de uma dúzia de componentes. Pode parecer um fardo, mas isso deixa muito claro quais componentes usam quais dados! A pessoa que mantiver seu código ficará feliz que você deixou o fluxo de dados explícito com props. -2. **Extraia componentes e [passe JSX como `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) para eles.** Se você passar alguns dados através de muitas camadas de componentes intermediários que não usam esses dados (e apenas os passam ainda mais para baixo), isso geralmente significa que você esqueceu de extrair alguns componentes ao longo do caminho. Por exemplo, talvez você passe dados props como `posts` para componentes visuais que não os utilizam diretamente, como ``. Em vez disso, faça com que `Layout` aceite `children` como uma prop e renderize ``. Isso reduz o número de camadas entre o componente que especifica os dados e aquele que precisa deles. +1. **Comece passando [props.](/learn/passing-props-to-a-component)** Se seus componentes não são triviais, não é incomum passar uma dúzia de props através de uma dúzia de componentes. Pode parecer uma tarefa cansativa, mas isso deixa muito claro quais componentes usam quais dados! A pessoa que manter seu código ficará feliz por você ter tornado o fluxo de dados explícito com props. +2. **Extraia componentes e [passe JSX como `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) para eles.** Se você passar alguns dados por muitas camadas de componentes intermediários que não usam esses dados (e apenas os passam adiante), isso geralmente significa que você esqueceu de extrair alguns componentes ao longo do caminho. Por exemplo, talvez você passe props de dados como `posts` para componentes visuais que não os usam diretamente, como ``. Em vez disso, faça com que `Layout` receba `children` como uma prop e renderize ``. Isso reduz o número de camadas entre o componente que especifica os dados e aquele que precisa deles. Se nenhuma dessas abordagens funcionar bem para você, considere o contexto. ## Casos de uso para contexto {/*use-cases-for-context*/} -* **Tematização:** Se o seu aplicativo permite que o usuário mude sua aparência (por exemplo, modo escuro), você pode colocar um provedor de contexto no topo do seu aplicativo e usar esse contexto nos componentes que precisam ajustar sua aparência visual. -* **Conta atual:** Muitos componentes podem precisar saber qual o usuário atualmente logado. Colocá-lo em contexto torna conveniente lê-lo em qualquer lugar da árvore. Alguns aplicativos também permitem que você opere várias contas ao mesmo tempo (por exemplo, para deixar um comentário como um usuário diferente). Nesses casos, pode ser conveniente envolver uma parte da UI em um provedor aninhado com um valor de conta atual diferente. -* **Roteamento:** A maioria das soluções de roteamento usa contexto internamente para manter a rota atual. É assim que cada link "sabe" se está ativo ou não. Se você construir seu próprio roteador, pode querer fazer isso também. -* **Gerenciamento de estado:** À medida que seu aplicativo cresce, você pode acabar com muitos estados mais próximos ao topo do seu aplicativo. Muitos componentes distantes abaixo podem querer mudá-lo. É comum [usar um redutor em conjunto com o contexto](/learn/scaling-up-with-reducer-and-context) para gerenciar estados complexos e passá-los para baixo para componentes distantes sem muito esforço. +* **Tematização:** Se seu aplicativo permite que o usuário mude sua aparência (por exemplo, modo escuro), você pode colocar um provedor de contexto no topo de seu aplicativo e usar esse contexto em componentes que precisam ajustar sua aparência visual. +* **Conta atual:** Muitos componentes podem precisar saber quem é o usuário atualmente logado. Colocá-lo em contexto torna conveniente lê-lo em qualquer lugar da árvore. Alguns aplicativos também permitem operar várias contas ao mesmo tempo (por exemplo, para deixar um comentário como um usuário diferente). Nesses casos, pode ser conveniente envolver uma parte da UI em um provedor aninhado com um valor de conta atual diferente. +* **Roteamento:** A maioria das soluções de roteamento usa contexto internamente para manter a rota atual. É assim que cada link "sabe" se está ativo ou não. Se você construir seu próprio roteador, talvez queira fazer isso também. +* **Gerenciando estado:** À medida que seu aplicativo cresce, você pode acabar com muito estado mais próximo do topo de seu aplicativo. Muitos componentes distantes abaixo podem querer mudá-lo. É comum [usar um redutor juntamente com contexto](/learn/scaling-up-with-reducer-and-context) para gerenciar estado complexo e passá-lo para componentes distantes sem muito esforço. + +O contexto não é limitado a valores estáticos. Se você passar um valor diferente na próxima renderização, o React atualizará todos os componentes que o lêem abaixo! É por isso que o contexto é frequentemente usado em combinação com o estado. -O contexto não se limita a valores estáticos. Se você passar um valor diferente na próxima renderização, o React atualizará todos os componentes que o lêem abaixo! É por isso que o contexto é frequentemente usado em combinação com o estado. - -Em geral, se algumas informações são necessárias por componentes distantes em diferentes partes da árvore, é uma boa indicação de que o contexto pode ajudá-lo. +Em geral, se alguma informação é necessária por componentes distantes em diferentes partes da árvore, é um bom indicativo de que o contexto será útil para você. * O contexto permite que um componente forneça algumas informações para toda a árvore abaixo dele. * Para passar contexto: - 1. Crie e exporte com `export const MyContext = createContext(defaultValue)`. - 2. Passe para o Hook `useContext(MyContext)` para lê-lo em qualquer componente filho, não importando quão profundo. - 3. Envolva filhos em `` para fornecê-lo a partir de um pai. -* O contexto passa através de qualquer componente no meio. -* O contexto permite que você escreva componentes que "se adaptam ao seu redor". + 1. Crie e exporte-o com `export const MyContext = createContext(defaultValue)`. + 2. Passe-o para o Hook `useContext(MyContext)` para lê-lo em qualquer componente filho, não importa quão profundo. + 3. Envolva os filhos em `` para fornecê-lo a partir de um pai. +* O contexto passa por quaisquer componentes no meio. +* O contexto permite que você escreva componentes que "se adaptam ao seu ambiente". * Antes de usar contexto, tente passar props ou passar JSX como `children`. @@ -881,7 +881,7 @@ Em geral, se algumas informações são necessárias por componentes distantes e Neste exemplo, alternar a caixa de seleção muda a prop `imageSize` passada para cada ``. O estado da caixa de seleção é mantido no componente `App` de nível superior, mas cada `` precisa estar ciente disso. -Atualmente, o `App` passa `imageSize` para `List`, que passa para cada `Place`, que passa para o `PlaceImage`. Remova a prop `imageSize` e, em vez disso, passe-a do componente `App` diretamente para o `PlaceImage`. +Atualmente, o `App` passa `imageSize` para `List`, que passa para cada `Place`, que passa para o `PlaceImage`. Remova a prop `imageSize` e, em vez disso, passe-a diretamente do componente `App` para `PlaceImage`. Você pode declarar o contexto em `Context.js`. @@ -970,27 +970,27 @@ export const places = [{ }, { id: 2, name: 'Macromural de Pachuca, México', - description: 'Um dos maiores murais do mundo cobrindo casas em um bairro em colina.', + description: 'Um dos maiores murais do mundo cobrindo casas em um bairro nas colinas.', imageId: 'DgXHVwu' }, { id: 3, name: 'Escadaria Selarón no Rio de Janeiro, Brasil', - description: 'Este marco foi criado por Jorge Selarón, um artista chileno, como um "tributo ao povo brasileiro."', + description: 'Este marco foi criado por Jorge Selarón, um artista nascido no Chile, como um "tributo ao povo brasileiro".', imageId: 'aeO3rpI' }, { id: 4, name: 'Burano, Itália', - description: 'As casas são pintadas seguindo um sistema de cores específico que data do século 16.', + description: 'As casas são pintadas seguindo um sistema de cores específico que remonta ao século 16.', imageId: 'kxsph5C' }, { id: 5, name: 'Chefchaouen, Marrocos', - description: 'Existem algumas teorias sobre por que as casas são pintadas de azul, incluindo que a cor repele mosquitos ou que simboliza o céu e o paraíso.', + description: 'Existem algumas teorias sobre por que as casas são pintadas de azul, incluindo que a cor repele mosquitos ou que simboliza céu e paraíso.', imageId: 'rTqKo46' }, { id: 6, name: 'Gamcheon Culture Village em Busan, Coreia do Sul', - description: 'Em 2009, a aldeia foi convertida em um centro cultural pintando as casas e apresentando exposições e instalações de arte.', + description: 'Em 2009, a vila foi convertida em um centro cultural ao pintar as casas e apresentar exposições e instalações de arte.', imageId: 'ZfQOOzf' }]; ``` @@ -1022,7 +1022,7 @@ li { Remova a prop `imageSize` de todos os componentes. -Crie e exporte `ImageSizeContext` de `Context.js`. Em seguida, envolva a List em `` para passar o valor para baixo e use `useContext(ImageSizeContext)` para lê-lo no `PlaceImage`: +Crie e exporte `ImageSizeContext` de `Context.js`. Em seguida, envolva o List em `` para passar o valor para baixo, e `useContext(ImageSizeContext)` para lê-lo no `PlaceImage`: @@ -1109,27 +1109,27 @@ export const places = [{ }, { id: 2, name: 'Macromural de Pachuca, México', - description: 'Um dos maiores murais do mundo cobrindo casas em um bairro em colina.', + description: 'Um dos maiores murais do mundo cobrindo casas em um bairro nas colinas.', imageId: 'DgXHVwu' }, { id: 3, name: 'Escadaria Selarón no Rio de Janeiro, Brasil', - description: 'Este marco foi criado por Jorge Selarón, um artista chileno, como um "tributo ao povo brasileiro".', + description: 'Este marco foi criado por Jorge Selarón, um artista nascido no Chile, como um "tributo ao povo brasileiro".', imageId: 'aeO3rpI' }, { id: 4, name: 'Burano, Itália', - description: 'As casas são pintadas seguindo um sistema de cores específico que data do século 16.', + description: 'As casas são pintadas seguindo um sistema de cores específico que remonta ao século 16.', imageId: 'kxsph5C' }, { id: 5, name: 'Chefchaouen, Marrocos', - description: 'Existem algumas teorias sobre por que as casas são pintadas de azul, incluindo que a cor repele mosquitos ou que simboliza o céu e o paraíso.', + description: 'Existem algumas teorias sobre por que as casas são pintadas de azul, incluindo que a cor repele mosquitos ou que simboliza céu e paraíso.', imageId: 'rTqKo46' }, { id: 6, name: 'Gamcheon Culture Village em Busan, Coreia do Sul', - description: 'Em 2009, a aldeia foi convertida em um centro cultural pintando as casas e apresentando exposições e instalações de arte.', + description: 'Em 2009, a vila foi convertida em um centro cultural ao pintar as casas e apresentar exposições e instalações de arte.', imageId: 'ZfQOOzf' }]; ``` @@ -1157,7 +1157,7 @@ li { -Note como os componentes intermediários não precisam passar `imageSize` mais. +Observe como os componentes no meio não precisam passar mais `imageSize`. From c77dc375e5822ef2ed02c6b0818ed3e50122afc3 Mon Sep 17 00:00:00 2001 From: Nivaldo Farias Date: Mon, 20 Jan 2025 14:23:56 -0300 Subject: [PATCH 4/4] Translate `passing-data-deeply-with-context.md` to pt-br --- .../learn/passing-data-deeply-with-context.md | 134 +++++++++--------- 1 file changed, 67 insertions(+), 67 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 4c00c5174..d1ba6a342 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -4,7 +4,7 @@ title: Passando Dados Profundamente com Contexto -Normalmente, você irá passar informações de um componente pai para um componente filho através de props. Mas passar props pode se tornar verboso e inconveniente se você precisar passá-las por muitos componentes intermediários ou se muitos componentes em seu aplicativo precisarem da mesma informação. *Contexto* permite que o componente pai disponibilize algumas informações para qualquer componente na árvore abaixo dele—não importa quão profundo—sem passá-las explicitamente por props. +Normalmente, você passará informações de um componente pai para um componente filho via props. No entanto, passar props pode se tornar verboso e inconveniente se você precisar passá-las por muitos componentes intermediários, ou se muitos componentes em sua aplicação precisarem da mesma informação. *Contexto* permite que o componente pai torne algumas informações disponíveis para qualquer componente na árvore abaixo dele—não importa quão profundo—sem passar explicitamente através de props. @@ -19,18 +19,18 @@ Normalmente, você irá passar informações de um componente pai para um compon ## O problema com a passagem de props {/*the-problem-with-passing-props*/} -[Passar props](/learn/passing-props-to-a-component) é uma ótima maneira de canalizar explicitamente dados através da sua árvore UI para os componentes que os utilizam. +[Passar props](/learn/passing-props-to-a-component) é uma ótima maneira de canalizar explicitamente dados através da sua árvore de UI para os componentes que os utilizam. -Mas passar props pode se tornar verboso e inconveniente quando você precisa passar uma prop profundamente pela árvore, ou se muitos componentes precisam da mesma prop. O ancestral comum mais próximo pode estar muito afastado dos componentes que precisam dos dados, e [levantar o estado](/learn/sharing-state-between-components) tão alto pode levar a uma situação chamada "prop drilling". +Mas passar props pode se tornar verboso e inconveniente quando você precisa passar alguma prop profundamente pela árvore, ou se muitos componentes precisam da mesma prop. O ancestral comum mais próximo pode estar longe dos componentes que precisam dos dados, e [elevar o estado](/learn/sharing-state-between-components) tão alto pode levar a uma situação chamada "prop drilling". - + -Levantando o estado +Elevando o estado - + Prop drilling @@ -38,7 +38,7 @@ Prop drilling -Não seria ótimo se houvesse uma maneira de "teletransportar" dados para os componentes na árvore que precisam deles sem passar props? Com o recurso de contexto do React, há! +Não seria ótimo se houvesse uma maneira de "teleportar" dados para os componentes na árvore que precisam dele sem passar props? Com o recurso de contexto do React, há! ## Contexto: uma alternativa à passagem de props {/*context-an-alternative-to-passing-props*/} @@ -106,7 +106,7 @@ export default function Heading({ level, children }) { -Suponha que você queira que vários cabeçalhos dentro da mesma `Section` tenham sempre o mesmo tamanho: +Vamos supor que você queira que múltiplos cabeçalhos dentro da mesma `Section` tenham sempre o mesmo tamanho: @@ -190,7 +190,7 @@ Atualmente, você passa a prop `level` para cada `` separadamente:
``` -Seria bom se você pudesse passar a prop `level` para o componente `
` em vez disso e removê-la do ``. Desta forma, você poderia garantir que todos os cabeçalhos na mesma seção tivessem o mesmo tamanho: +Seria bom se você pudesse passar a prop `level` para o componente `
` em vez de removê-la do ``. Dessa forma, você poderia garantir que todos os cabeçalhos na mesma seção tenham o mesmo tamanho: ```js
@@ -200,25 +200,25 @@ Seria bom se você pudesse passar a prop `level` para o componente `
` e
``` -Mas como o componente `` saberia o nível de sua `
` mais próxima? **Isso exigiria alguma maneira de um filho "perguntar" por dados de algum lugar acima na árvore.** +Mas como o componente `` saberá o nível de sua `
` mais próxima? **Isso exigiria alguma forma de a criança "perguntar" dados a partir de algum lugar acima na árvore.** -Você não pode fazer isso apenas com props. É aqui que o contexto entra em jogo. Você fará isso em três etapas: +Você não pode fazer isso apenas com props. É aqui que o contexto entra em cena. Você fará isso em três etapas: -1. **Criar** um contexto. (Você pode chamá-lo de `LevelContext`, já que é para o nível do cabeçalho.) +1. **Criar** um contexto. (Você pode chamá-lo de `LevelContext`, já que se refere ao nível de cabeçalho.) 2. **Usar** esse contexto a partir do componente que precisa dos dados. (`Heading` usará `LevelContext`.) 3. **Fornecer** esse contexto a partir do componente que especifica os dados. (`Section` fornecerá `LevelContext`.) -O contexto permite que um pai—até mesmo um distante!—forneça alguns dados para toda a árvore dentro dele. +O contexto permite que um pai—mesmo um distante!—forneça alguns dados para toda a árvore dentro dele. - + Usando contexto em filhos próximos - + Usando contexto em filhos distantes @@ -308,7 +308,7 @@ export const LevelContext = createContext(1); -O único argumento para `createContext` é o _valor padrão_. Aqui, `1` se refere ao maior nível de cabeçalho, mas você poderia passar qualquer tipo de valor (até mesmo um objeto). Você verá a importância do valor padrão na próxima etapa. +O único argumento para `createContext` é o _valor padrão_. Aqui, `1` refere-se ao maior nível de cabeçalho, mas você poderia passar qualquer tipo de valor (até mesmo um objeto). Você verá a importância do valor padrão na próxima etapa. ### Etapa 2: Usar o contexto {/*step-2-use-the-context*/} @@ -319,7 +319,7 @@ import { useContext } from 'react'; import { LevelContext } from './LevelContext.js'; ``` -Atualmente, o componente `Heading` lê `level` a partir das props: +Atualmente, o componente `Heading` lê `level` a partir de props: ```js export default function Heading({ level, children }) { @@ -338,7 +338,7 @@ export default function Heading({ children }) { `useContext` é um Hook. Assim como `useState` e `useReducer`, você só pode chamar um Hook imediatamente dentro de um componente React (não dentro de loops ou condições). **`useContext` informa ao React que o componente `Heading` deseja ler o `LevelContext`.** -Agora que o componente `Heading` não possui uma prop `level`, você não precisa passar a prop level para `Heading` em seu JSX assim: +Agora que o componente `Heading` não possui uma prop `level`, você não precisa mais passar a prop de nível para `Heading` em seu JSX assim: ```js
@@ -348,7 +348,7 @@ Agora que o componente `Heading` não possui uma prop `level`, você não precis
``` -Atualize o JSX para que agora seja a `Section` que recebe isso: +Atualize o JSX para que seja a `Section` que receba isso em vez: ```jsx
@@ -442,9 +442,9 @@ export const LevelContext = createContext(1); -Observe que este exemplo ainda não funciona muito bem! Todos os cabeçalhos têm o mesmo tamanho porque **embora você esteja *usando* o contexto, você ainda não o *forneceu*.** O React não sabe onde obtê-lo! +Observe que este exemplo ainda não funciona direito! Todos os cabeçalhos têm o mesmo tamanho porque **mesmo que você *use* o contexto, você ainda não o *forneceu*.** O React não sabe de onde obtê-lo! -Se você não fornecer o contexto, o React usará o valor padrão que você especificou na etapa anterior. Neste exemplo, você especificou `1` como argumento para `createContext`, então `useContext(LevelContext)` retorna `1`, definindo todos aqueles cabeçalhos como `

`. Vamos corrigir esse problema fazendo com que cada `Section` forneça seu próprio contexto. +Se você não fornecer o contexto, o React usará o valor padrão que você especificou na etapa anterior. Neste exemplo, você especificou `1` como argumento para `createContext`, então `useContext(LevelContext)` retorna `1`, definindo todos esses cabeçalhos como `

`. Vamos corrigir esse problema fazendo com que cada `Section` forneça seu próprio contexto. ### Etapa 3: Fornecer o contexto {/*step-3-provide-the-context*/} @@ -476,7 +476,7 @@ export default function Section({ level, children }) { } ``` -Isso diz ao React: "se algum componente dentro deste `
` perguntar por `LevelContext`, dê a ele este `level`." O componente usará o valor do mais próximo `` na árvore UI acima dele. +Isso informa ao React: "se algum componente dentro deste `
` perguntar por `LevelContext`, dê a ele este `level`." O componente usará o valor do mais próximo `` na árvore de UI acima dele. @@ -564,15 +564,15 @@ export const LevelContext = createContext(1); -É o mesmo resultado que o código original, mas você não precisava passar a prop `level` para cada componente `Heading`! Em vez disso, ele "descobre" seu nível de cabeçalho perguntando ao mais próximo `Section` acima: +É o mesmo resultado que o código original, mas você não precisou passar a prop `level` para cada componente `Heading`! Em vez disso, ele "descobre" seu nível de cabeçalho perguntando o valor mais próximo de `Section` acima: -1. Você passa uma prop `level` para a `
`. -2. `Section` envolve seus filhos em ``. -3. `Heading` pergunta o valor mais próximo de `LevelContext` acima com `useContext(LevelContext)`. +1. Você passa uma prop `level` para o `
`. +2. `Section` envolve seus filhos dentro do ``. +3. `Heading` pergunta pelo valor mais próximo de `LevelContext` acima com `useContext(LevelContext)`. ## Usando e fornecendo contexto do mesmo componente {/*using-and-providing-context-from-the-same-component*/} -Atualmente, você ainda precisa especificar manualmente o `level` de cada seção: +Atualmente, você ainda precisa especificar o `level` de cada seção manualmente: ```js export default function Page() { @@ -603,7 +603,7 @@ export default function Section({ children }) { } ``` -Com essa mudança, você não precisa passar a prop `level` *nem* para a `
` *nem* para a ``: +Com essa mudança, você não precisa passar a prop `level` *nem* para o `
` *nem* para o ``: @@ -695,17 +695,17 @@ export const LevelContext = createContext(0); -Agora tanto `Heading` quanto `Section` leem o `LevelContext` para descobrir quão "profundos" eles estão. E a `Section` envolve seus filhos no `LevelContext` para especificar que qualquer coisa dentro dela está em um nível "mais profundo". +Agora tanto `Heading` quanto `Section` leem o `LevelContext` para descobrir quão "profundos" estão. E o `Section` envolve seus filhos dentro do `LevelContext` para especificar que qualquer coisa dentro dele está em um "nível" mais profundo. -Este exemplo usa níveis de cabeçalho porque eles mostram visualmente como componentes aninhados podem sobrescrever o contexto. Mas o contexto é útil para muitos outros casos de uso também. Você pode passar qualquer informação necessária para toda a subtree: o tema de cores atual, o usuário atualmente logado, e assim por diante. +Este exemplo usa níveis de cabeçalho porque eles mostram visualmente como componentes aninhados podem sobrescrever o contexto. Mas o contexto é útil para muitos outros casos de uso também. Você pode passar qualquer informação necessária por toda a subárvore: o tema de cor atual, o usuário atualmente logado, e assim por diante. ## O contexto passa através de componentes intermediários {/*context-passes-through-intermediate-components*/} -Você pode inserir quantos componentes quiser entre o componente que fornece contexto e aquele que o usa. Isso inclui tanto componentes integrados como `
` quanto componentes que você pode construir. +Você pode inserir quantos componentes quiser entre o componente que fornece contexto e aquele que o utiliza. Isso inclui tanto componentes embutidos como `
` quanto componentes que você possa construir. Neste exemplo, o mesmo componente `Post` (com uma borda tracejada) é renderizado em dois níveis de aninhamento diferentes. Note que o `` dentro dele obtém seu nível automaticamente do mais próximo `
`: @@ -731,7 +731,7 @@ export default function ProfilePage() { function AllPosts() { return (
- Postagens + Posts
); @@ -740,13 +740,13 @@ function AllPosts() { function RecentPosts() { return (
- Postagens Recentes + Posts Recentes
@@ -832,56 +832,56 @@ export const LevelContext = createContext(0); -Você não fez nada especial para isso funcionar. Um `Section` especifica o contexto para a árvore dentro dele, então você pode inserir um `` em qualquer lugar, e ele terá o tamanho correto. Experimente no sandbox acima! +Você não fez nada de especial para que isso funcionasse. Um `Section` especifica o contexto para a árvore dentro dele, então você pode inserir um `` em qualquer lugar, e ele terá o tamanho correto. Tente isso no sandbox acima! -**O contexto permite que você escreva componentes que "se adaptam ao seu ambiente" e se exibem de forma diferente dependendo de _onde_ (ou seja, _em qual contexto_) estão sendo renderizados.** +**O contexto permite que você escreva componentes que "se adaptam ao seu entorno" e se exibam de forma diferente dependendo de _onde_ (ou, em outras palavras, _em qual contexto_) estão sendo renderizados.** -Como o contexto funciona pode lembrar você da [herança de propriedades CSS.](https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance) No CSS, você pode especificar `color: blue` para um `
`, e qualquer nó DOM dentro dele, não importa quão profundo, herdará essa cor, a menos que algum outro nó DOM no meio sobrescreva isso com `color: green`. Da mesma forma, no React, a única maneira de sobrescrever algum contexto vindo de cima é envolver os filhos em um provedor de contexto com um valor diferente. +Como o contexto funciona pode lembrá-lo da [herança de propriedades CSS.](https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance) No CSS, você pode especificar `color: blue` para um `
`, e qualquer nó DOM dentro dele, não importa quão profundo, herdará essa cor a menos que algum outro nó DOM no meio sobrescreva com `color: green`. Da mesma forma, no React, a única maneira de sobrescrever algum contexto que vem de cima é envolver os filhos em um provedor de contexto com um valor diferente. -Em CSS, propriedades diferentes como `color` e `background-color` não se sobrescrevem. Você pode definir todas as `div`s `color` para vermelho sem impactar `background-color`. De maneira similar, **diferentes contextos React não se sobrescrevem.** Cada contexto que você faz com `createContext()` é completamente separado de outros e conecta componentes que usam e fornecem *aquele contexto específico*. Um componente pode usar ou fornecer muitos contextos diferentes sem problemas. +Em CSS, diferentes propriedades como `color` e `background-color` não se sobrescrevem. Você pode definir todas as `
`'s `color` como vermelho sem impactar `background-color`. Da mesma forma, **diferentes contextos React não se sobrescrevem.** Cada contexto que você cria com `createContext()` é completamente separado de outros, e conecta componentes que usam e fornecem *aquele contexto em particular*. Um componente pode usar ou fornecer muitos contextos diferentes sem problemas. ## Antes de usar contexto {/*before-you-use-context*/} -O contexto é muito tentador de usar! No entanto, isso também significa que é fácil demais abusar dele. **Só porque você precisa passar algumas props em vários níveis profundos não significa que você deve colocar essas informações em contexto.** +O contexto é muito tentador de usar! No entanto, isso também significa que é fácil demais usá-lo em excesso. **Só porque você precisa passar algumas props várias camadas abaixo não significa que você deve colocar essa informação no contexto.** Aqui estão algumas alternativas que você deve considerar antes de usar contexto: -1. **Comece passando [props.](/learn/passing-props-to-a-component)** Se seus componentes não são triviais, não é incomum passar uma dúzia de props através de uma dúzia de componentes. Pode parecer uma tarefa cansativa, mas isso deixa muito claro quais componentes usam quais dados! A pessoa que manter seu código ficará feliz por você ter tornado o fluxo de dados explícito com props. -2. **Extraia componentes e [passe JSX como `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) para eles.** Se você passar alguns dados por muitas camadas de componentes intermediários que não usam esses dados (e apenas os passam adiante), isso geralmente significa que você esqueceu de extrair alguns componentes ao longo do caminho. Por exemplo, talvez você passe props de dados como `posts` para componentes visuais que não os usam diretamente, como ``. Em vez disso, faça com que `Layout` receba `children` como uma prop e renderize ``. Isso reduz o número de camadas entre o componente que especifica os dados e aquele que precisa deles. +1. **Comece passando [props.](/learn/passing-props-to-a-component)** Se seus componentes não são triviais, não é incomum passar uma dúzia de props por uma dúzia de componentes. Pode parecer cansativo, mas torna muito claro quais componentes usam quais dados! A pessoa que mantiver seu código ficará feliz que você tornou o fluxo de dados explícito com props. +2. **Extraia componentes e [passe JSX como `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) para eles.** Se você passar alguns dados por muitas camadas de componentes intermediários que não usam esses dados (e apenas os passam adiante), isso muitas vezes significa que você esqueceu de extrair alguns componentes ao longo do caminho. Por exemplo, talvez você passe props de dados como `posts` para componentes visuais que não os usam diretamente, como ``. Em vez disso, faça com que `Layout` receba `children` como prop, e renderize ``. Isso reduz o número de camadas entre o componente que especifica os dados e o que precisa deles. Se nenhuma dessas abordagens funcionar bem para você, considere o contexto. ## Casos de uso para contexto {/*use-cases-for-context*/} -* **Tematização:** Se seu aplicativo permite que o usuário mude sua aparência (por exemplo, modo escuro), você pode colocar um provedor de contexto no topo de seu aplicativo e usar esse contexto em componentes que precisam ajustar sua aparência visual. -* **Conta atual:** Muitos componentes podem precisar saber quem é o usuário atualmente logado. Colocá-lo em contexto torna conveniente lê-lo em qualquer lugar da árvore. Alguns aplicativos também permitem operar várias contas ao mesmo tempo (por exemplo, para deixar um comentário como um usuário diferente). Nesses casos, pode ser conveniente envolver uma parte da UI em um provedor aninhado com um valor de conta atual diferente. -* **Roteamento:** A maioria das soluções de roteamento usa contexto internamente para manter a rota atual. É assim que cada link "sabe" se está ativo ou não. Se você construir seu próprio roteador, talvez queira fazer isso também. -* **Gerenciando estado:** À medida que seu aplicativo cresce, você pode acabar com muito estado mais próximo do topo de seu aplicativo. Muitos componentes distantes abaixo podem querer mudá-lo. É comum [usar um redutor juntamente com contexto](/learn/scaling-up-with-reducer-and-context) para gerenciar estado complexo e passá-lo para componentes distantes sem muito esforço. - -O contexto não é limitado a valores estáticos. Se você passar um valor diferente na próxima renderização, o React atualizará todos os componentes que o lêem abaixo! É por isso que o contexto é frequentemente usado em combinação com o estado. +* **Tematização:** Se seu aplicativo permitir que o usuário mude sua aparência (por exemplo, modo escuro), você pode colocar um provedor de contexto no topo do seu aplicativo e usar esse contexto em componentes que precisam ajustar sua aparência visual. +* **Conta atual:** Muitos componentes podem precisar saber quem é o usuário atualmente logado. Colocá-lo em contexto torna conveniente lê-lo em qualquer lugar na árvore. Alguns aplicativos também permitem que você opere várias contas ao mesmo tempo (por exemplo, para deixar um comentário como um usuário diferente). Nesses casos, pode ser conveniente envolver uma parte da UI em um provedor aninhado com um valor atual de conta diferente. +* **Roteamento:** A maioria das soluções de roteamento usa internamente o contexto para manter a rota atual. É assim que cada link "sabe" se está ativo ou não. Se você construir seu próprio roteador, pode querer fazer o mesmo. +* **Gerenciamento de estado:** À medida que seu aplicativo cresce, você pode acabar com muitos estados mais perto do topo do seu aplicativo. Muitos componentes distantes abaixo podem querer mudá-lo. É comum [usar um redutor junto com contexto](/learn/scaling-up-with-reducer-and-context) para gerenciar estados complexos e passá-los para componentes distantes sem muitos problemas. -Em geral, se alguma informação é necessária por componentes distantes em diferentes partes da árvore, é um bom indicativo de que o contexto será útil para você. +O contexto não se limita a valores estáticos. Se você passar um valor diferente na próxima renderização, o React atualizará todos os componentes que o estão lendo abaixo! É por isso que o contexto é frequentemente usado em combinação com estado. + +Em geral, se algumas informações são necessárias por componentes distantes em diferentes partes da árvore, é um bom indicativo de que o contexto ajudará você. * O contexto permite que um componente forneça algumas informações para toda a árvore abaixo dele. * Para passar contexto: - 1. Crie e exporte-o com `export const MyContext = createContext(defaultValue)`. - 2. Passe-o para o Hook `useContext(MyContext)` para lê-lo em qualquer componente filho, não importa quão profundo. - 3. Envolva os filhos em `` para fornecê-lo a partir de um pai. -* O contexto passa por quaisquer componentes no meio. -* O contexto permite que você escreva componentes que "se adaptam ao seu ambiente". + 1. Crie e exporte com `export const MyContext = createContext(defaultValue)`. + 2. Passe para o Hook `useContext(MyContext)` para lê-lo em qualquer componente filho, não importa quão profundo. + 3. Envolva os filhos dentro de `` para fornecer a partir de um pai. +* O contexto passa através de quaisquer componentes no meio. +* O contexto permite que você escreva componentes que "se adaptam ao seu entorno". * Antes de usar contexto, tente passar props ou passar JSX como `children`. -#### Substitua o prop drilling pelo contexto {/*replace-prop-drilling-with-context*/} +#### Substitua o prop drilling por contexto {/*replace-prop-drilling-with-context*/} -Neste exemplo, alternar a caixa de seleção muda a prop `imageSize` passada para cada ``. O estado da caixa de seleção é mantido no componente `App` de nível superior, mas cada `` precisa estar ciente disso. +Neste exemplo, alternar a caixa de seleção muda a prop `imageSize` passada para cada ``. O estado da caixa de seleção é mantido no componente topo `App`, mas cada `` precisa estar ciente disso. -Atualmente, o `App` passa `imageSize` para `List`, que passa para cada `Place`, que passa para o `PlaceImage`. Remova a prop `imageSize` e, em vez disso, passe-a diretamente do componente `App` para `PlaceImage`. +Atualmente, `App` passa `imageSize` para `List`, que passa para cada `Place`, que passa para o `PlaceImage`. Remova a prop `imageSize` e, em vez disso, passe-a do componente `App` diretamente ao `PlaceImage`. Você pode declarar o contexto em `Context.js`. @@ -960,7 +960,7 @@ function PlaceImage({ place, imageSize }) { export const places = [{ id: 0, name: 'Bo-Kaap em Cape Town, África do Sul', - description: 'A tradição de escolher cores brilhantes para casas começou no final do século 20.', + description: 'A tradição de escolher cores brilhantes para as casas começou no final do século 20.', imageId: 'K9HVAGH' }, { id: 1, @@ -970,12 +970,12 @@ export const places = [{ }, { id: 2, name: 'Macromural de Pachuca, México', - description: 'Um dos maiores murais do mundo cobrindo casas em um bairro nas colinas.', + description: 'Um dos maiores murais do mundo cobrindo casas em um bairro na colina.', imageId: 'DgXHVwu' }, { id: 3, name: 'Escadaria Selarón no Rio de Janeiro, Brasil', - description: 'Este marco foi criado por Jorge Selarón, um artista nascido no Chile, como um "tributo ao povo brasileiro".', + description: 'Este marco foi criado por Jorge Selarón, um artista nascido no Chile, como um "tributo ao povo brasileiro."', imageId: 'aeO3rpI' }, { id: 4, @@ -985,12 +985,12 @@ export const places = [{ }, { id: 5, name: 'Chefchaouen, Marrocos', - description: 'Existem algumas teorias sobre por que as casas são pintadas de azul, incluindo que a cor repele mosquitos ou que simboliza céu e paraíso.', + description: 'Existem algumas teorias sobre por que as casas são pintadas de azul, incluindo que a cor repele mosquitos ou que simboliza o céu e o paraíso.', imageId: 'rTqKo46' }, { id: 6, name: 'Gamcheon Culture Village em Busan, Coreia do Sul', - description: 'Em 2009, a vila foi convertida em um centro cultural ao pintar as casas e apresentar exposições e instalações de arte.', + description: 'Em 2009, a vila foi convertida em um centro cultural pintando as casas e apresentando exposições e instalações artísticas.', imageId: 'ZfQOOzf' }]; ``` @@ -1022,7 +1022,7 @@ li { Remova a prop `imageSize` de todos os componentes. -Crie e exporte `ImageSizeContext` de `Context.js`. Em seguida, envolva o List em `` para passar o valor para baixo, e `useContext(ImageSizeContext)` para lê-lo no `PlaceImage`: +Crie e exporte `ImageSizeContext` de `Context.js`. Depois, envolva o List em `` para passar o valor para baixo, e `useContext(ImageSizeContext)` para lê-lo no `PlaceImage`: @@ -1099,7 +1099,7 @@ export const ImageSizeContext = createContext(500); export const places = [{ id: 0, name: 'Bo-Kaap em Cape Town, África do Sul', - description: 'A tradição de escolher cores brilhantes para casas começou no final do século 20.', + description: 'A tradição de escolher cores brilhantes para as casas começou no final do século 20.', imageId: 'K9HVAGH' }, { id: 1, @@ -1109,7 +1109,7 @@ export const places = [{ }, { id: 2, name: 'Macromural de Pachuca, México', - description: 'Um dos maiores murais do mundo cobrindo casas em um bairro nas colinas.', + description: 'Um dos maiores murais do mundo cobrindo casas em um bairro na colina.', imageId: 'DgXHVwu' }, { id: 3, @@ -1124,12 +1124,12 @@ export const places = [{ }, { id: 5, name: 'Chefchaouen, Marrocos', - description: 'Existem algumas teorias sobre por que as casas são pintadas de azul, incluindo que a cor repele mosquitos ou que simboliza céu e paraíso.', + description: 'Existem algumas teorias sobre por que as casas são pintadas de azul, incluindo que a cor repele mosquitos ou que simboliza o céu e o paraíso.', imageId: 'rTqKo46' }, { id: 6, name: 'Gamcheon Culture Village em Busan, Coreia do Sul', - description: 'Em 2009, a vila foi convertida em um centro cultural ao pintar as casas e apresentar exposições e instalações de arte.', + description: 'Em 2009, a vila foi convertida em um centro cultural pintando as casas e apresentando exposições e instalações artísticas.', imageId: 'ZfQOOzf' }]; ``` @@ -1157,7 +1157,7 @@ li { -Observe como os componentes no meio não precisam passar mais `imageSize`. +Note que os componentes intermediários não precisam passar `imageSize` mais.