Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translate cloneElement.md to Portuguese #1059

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Translate cloneElement.md to Portuguese #1059

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 51 additions & 52 deletions src/content/reference/react/cloneElement.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ title: cloneElement

<Pitfall>

Using `cloneElement` is uncommon and can lead to fragile code. [See common alternatives.](#alternatives)
Usar `cloneElement` é incomum e pode levar a um código frágil. [Veja alternativas comuns.](#alternatives)

</Pitfall>

<Intro>

`cloneElement` lets you create a new React element using another element as a starting point.
`cloneElement` permite que você crie um novo Elemento React usando outro elemento como ponto de partida.

```js
const clonedElement = cloneElement(element, props, ...children)
Expand All @@ -22,11 +22,11 @@ const clonedElement = cloneElement(element, props, ...children)

---

## Reference {/*reference*/}
## Referência {/*reference*/}

### `cloneElement(element, props, ...children)` {/*cloneelement*/}

Call `cloneElement` to create a React element based on the `element`, but with different `props` and `children`:
Chame `cloneElement` para criar um Elemento React com base no `element`, mas com diferentes `props` e `children`:

```js
import { cloneElement } from 'react';
Expand All @@ -43,42 +43,42 @@ const clonedElement = cloneElement(
console.log(clonedElement); // <Row title="Cabbage" isHighlighted={true}>Goodbye</Row>
```

[See more examples below.](#usage)
[Veja mais exemplos abaixo.](#usage)

#### Parameters {/*parameters*/}
#### Parâmetros {/*parameters*/}

* `element`: The `element` argument must be a valid React element. For example, it could be a JSX node like `<Something />`, the result of calling [`createElement`](/reference/react/createElement), or the result of another `cloneElement` call.
* `element`: O argumento `element` deve ser um Elemento React válido. Por exemplo, pode ser um nó JSX como `<Something />`, o resultado da chamada [`createElement`](/reference/react/createElement), ou o resultado de outra chamada de `cloneElement`.

* `props`: The `props` argument must either be an object or `null`. If you pass `null`, the cloned element will retain all of the original `element.props`. Otherwise, for every prop in the `props` object, the returned element will "prefer" the value from `props` over the value from `element.props`. The rest of the props will be filled from the original `element.props`. If you pass `props.key` or `props.ref`, they will replace the original ones.
* `props`: O argumento `props` deve ser um objeto ou `null`. Se você passar `null`, o elemento clonado reterá todas as `element.props` originais. Caso contrário, para cada prop no objeto `props`, o elemento retornado irá "preferir" o valor de `props` sobre o valor de `element.props`. O restante das props será preenchido a partir do `element.props` original. Se você passar `props.key` ou `props.ref`, eles substituirão as originais.

* **optional** `...children`: Zero or more child nodes. They can be any React nodes, including React elements, strings, numbers, [portals](/reference/react-dom/createPortal), empty nodes (`null`, `undefined`, `true`, and `false`), and arrays of React nodes. If you don't pass any `...children` arguments, the original `element.props.children` will be preserved.
* **opcional** `...children`: Zero ou mais nós filhos. Eles podem ser quaisquer nós React, incluindo Elementos React, strings, números, [portais](/reference/react-dom/createPortal), nós vazios (`null`, `undefined`, `true` e `false`), e arrays de nós React. Se você não passar nenhum argumento `...children`, o `element.props.children` original será preservado.

#### Returns {/*returns*/}
#### Retorna {/*returns*/}

`cloneElement` returns a React element object with a few properties:
`cloneElement` retorna um objeto Elemento React com algumas propriedades:

* `type`: Same as `element.type`.
* `props`: The result of shallowly merging `element.props` with the overriding `props` you have passed.
* `ref`: The original `element.ref`, unless it was overridden by `props.ref`.
* `key`: The original `element.key`, unless it was overridden by `props.key`.
* `type`: Igual a `element.type`.
* `props`: O resultado da mesclagem rasa de `element.props` com as `props` que você passou.
* `ref`: O `element.ref` original, a menos que fosse sobreposto por `props.ref`.
* `key`: O `element.key` original, a menos que fosse sobreposto por `props.key`.

Usually, you'll return the element from your component or make it a child of another element. Although you may read the element's properties, it's best to treat every element as opaque after it's created, and only render it.
Geralmente, você retornará o elemento do seu componente ou o tornará filho de outro elemento. Embora você possa ler as propriedades do elemento, é melhor tratar cada elemento como opaco após sua criação e apenas renderizá-lo.

#### Caveats {/*caveats*/}
#### Ressalvas {/*caveats*/}

* Cloning an element **does not modify the original element.**
* Clonar um elemento **não modifica o elemento original.**

* You should only **pass children as multiple arguments to `cloneElement` if they are all statically known,** like `cloneElement(element, null, child1, child2, child3)`. If your children are dynamic, pass the entire array as the third argument: `cloneElement(element, null, listItems)`. This ensures that React will [warn you about missing `key`s](/learn/rendering-lists#keeping-list-items-in-order-with-key) for any dynamic lists. For static lists this is not necessary because they never reorder.
* Você deve apenas **passar `children` como vários argumentos para `cloneElement` se eles forem todos estaticamente conhecidos,** como `cloneElement(element, null, child1, child2, child3)`. Se seus `children` forem dinâmicos, passe o array inteiro como o terceiro argumento: `cloneElement(element, null, listItems)`. Isso garante que o React irá [avisá-lo sobre `key`s ausentes](/learn/rendering-lists#keeping-list-items-in-order-with-key) para quaisquer listas dinâmicas. Para listas estáticas, isso não é necessário porque elas nunca são reordenadas.

* `cloneElement` makes it harder to trace the data flow, so **try the [alternatives](#alternatives) instead.**
* `cloneElement` dificulta o rastreamento do fluxo de dados, então **tente as [alternativas](#alternatives) em vez disso.**

---

## Usage {/*usage*/}
## Uso {/*usage*/}

### Overriding props of an element {/*overriding-props-of-an-element*/}
### Substituindo as props de um elemento {/*overriding-props-of-an-element*/}

To override the props of some <CodeStep step={1}>React element</CodeStep>, pass it to `cloneElement` with the <CodeStep step={2}>props you want to override</CodeStep>:
Para substituir as props de algum <CodeStep step={1}>Elemento React</CodeStep>, passe-o para `cloneElement` com as <CodeStep step={2}>props que você deseja substituir</CodeStep>:

```js [[1, 5, "<Row title=\\"Cabbage\\" />"], [2, 6, "{ isHighlighted: true }"], [3, 4, "clonedElement"]]
import { cloneElement } from 'react';
Expand All @@ -90,11 +90,11 @@ const clonedElement = cloneElement(
);
```

Here, the resulting <CodeStep step={3}>cloned element</CodeStep> will be `<Row title="Cabbage" isHighlighted={true} />`.
Aqui, o <CodeStep step={3}>elemento clonado</CodeStep> resultante será `<Row title="Cabbage" isHighlighted={true} />`.

**Let's walk through an example to see when it's useful.**
**Vamos analisar um exemplo para ver quando isso é útil.**

Imagine a `List` component that renders its [`children`](/learn/passing-props-to-a-component#passing-jsx-as-children) as a list of selectable rows with a "Next" button that changes which row is selected. The `List` component needs to render the selected `Row` differently, so it clones every `<Row>` child that it has received, and adds an extra `isHighlighted: true` or `isHighlighted: false` prop:
Imagine um componente `List` que renderiza seus [`children`](/learn/passing-props-to-a-component#passing-jsx-as-children) como uma lista de linhas selecionáveis com um botão "Próximo" que altera qual linha é selecionada. O componente `List` precisa renderizar o `Row` selecionado de forma diferente, então ele clona cada filho `<Row>` que recebeu e adiciona uma prop extra `isHighlighted: true` ou `isHighlighted: false`:

```js {6-8}
export default function List({ children }) {
Expand All @@ -108,7 +108,7 @@ export default function List({ children }) {
)}
```

Let's say the original JSX received by `List` looks like this:
Digamos que o JSX original recebido por `List` se pareça com isto:

```js {2-4}
<List>
Expand All @@ -118,7 +118,7 @@ Let's say the original JSX received by `List` looks like this:
</List>
```

By cloning its children, the `List` can pass extra information to every `Row` inside. The result looks like this:
Ao clonar seus filhos, o `List` pode passar informações extras para cada `Row` dentro. O resultado tem esta aparência:

```js {4,8,12}
<List>
Expand All @@ -137,7 +137,7 @@ By cloning its children, the `List` can pass extra information to every `Row` in
</List>
```

Notice how pressing "Next" updates the state of the `List`, and highlights a different row:
Observe como pressionar "Próximo" atualiza o estado do `List` e destaca uma linha diferente:

<Sandpack>

Expand Down Expand Up @@ -232,21 +232,21 @@ button {

</Sandpack>

To summarize, the `List` cloned the `<Row />` elements it received and added an extra prop to them.
Para resumir, o `List` clonou os elementos `<Row />` que recebeu e adicionou uma prop extra a eles.

<Pitfall>

Cloning children makes it hard to tell how the data flows through your app. Try one of the [alternatives.](#alternatives)
Clonar children torna difícil dizer como os dados fluem pelo seu app. Tente uma das [alternativas.](#alternatives)

</Pitfall>

---

## Alternatives {/*alternatives*/}
## Alternativas {/*alternatives*/}

### Passing data with a render prop {/*passing-data-with-a-render-prop*/}
### Passando dados com uma render prop {/*passing-data-with-a-render-prop*/}

Instead of using `cloneElement`, consider accepting a *render prop* like `renderItem`. Here, `List` receives `renderItem` as a prop. `List` calls `renderItem` for every item and passes `isHighlighted` as an argument:
Em vez de usar `cloneElement`, considere aceitar uma *render prop* como `renderItem`. Aqui, `List` recebe `renderItem` como uma prop. `List` chama `renderItem` para cada item e passa `isHighlighted` como um argumento:

```js {1,7}
export default function List({ items, renderItem }) {
Expand All @@ -259,7 +259,7 @@ export default function List({ items, renderItem }) {
})}
```

The `renderItem` prop is called a "render prop" because it's a prop that specifies how to render something. For example, you can pass a `renderItem` implementation that renders a `<Row>` with the given `isHighlighted` value:
A prop `renderItem` é chamada de "render prop" porque é uma prop que especifica como renderizar algo. Por exemplo, você pode passar uma implementação `renderItem` que renderiza um `<Row>` com o valor `isHighlighted ` fornecido:

```js {3,7}
<List
Expand All @@ -274,7 +274,7 @@ The `renderItem` prop is called a "render prop" because it's a prop that specifi
/>
```

The end result is the same as with `cloneElement`:
O resultado final é o mesmo que com `cloneElement`:

```js {4,8,12}
<List>
Expand All @@ -293,7 +293,7 @@ The end result is the same as with `cloneElement`:
</List>
```

However, you can clearly trace where the `isHighlighted` value is coming from.
No entanto, você pode rastrear claramente de onde o valor `isHighlighted` vem.

<Sandpack>

Expand Down Expand Up @@ -389,22 +389,21 @@ button {

</Sandpack>

This pattern is preferred to `cloneElement` because it is more explicit.
Esse padrão é preferido ao `cloneElement` porque é mais explícito.

---

### Passing data through context {/*passing-data-through-context*/}
### Passando dados através do contexto {/*passing-data-through-context*/}

Another alternative to `cloneElement` is to [pass data through context.](/learn/passing-data-deeply-with-context)
Outra alternativa para `cloneElement` é [passar dados através do contexto.](/learn/passing-data-deeply-with-context)


For example, you can call [`createContext`](/reference/react/createContext) to define a `HighlightContext`:
Por exemplo, você pode chamar [`createContext`](/reference/react/createContext) para definir um `HighlightContext`:

```js
export const HighlightContext = createContext(false);
```

Your `List` component can wrap every item it renders into a `HighlightContext` provider:
Seu componente `List` pode encapsular cada item que renderiza em um provedor `HighlightContext`:

```js {8,10}
export default function List({ items, renderItem }) {
Expand All @@ -421,15 +420,15 @@ export default function List({ items, renderItem }) {
})}
```

With this approach, `Row` does not need to receive an `isHighlighted` prop at all. Instead, it reads the context:
Com essa abordagem, `Row` não precisa receber uma prop `isHighlighted` . Em vez disso, ele lê o contexto:

```js src/Row.js {2}
export default function Row({ title }) {
const isHighlighted = useContext(HighlightContext);
// ...
```

This allows the calling component to not know or worry about passing `isHighlighted` to `<Row>`:
Isso permite que o componente de chamada não saiba ou se preocupe em passar `isHighlighted` para `<Row>`:

```js {4}
<List
Expand All @@ -440,7 +439,7 @@ This allows the calling component to not know or worry about passing `isHighligh
/>
```

Instead, `List` and `Row` coordinate the highlighting logic through context.
Em vez disso, `List` e `Row` coordenam a lógica de realce por meio do contexto.

<Sandpack>

Expand Down Expand Up @@ -550,13 +549,13 @@ button {

</Sandpack>

[Learn more about passing data through context.](/reference/react/useContext#passing-data-deeply-into-the-tree)
[Aprenda mais sobre como passar dados pelo contexto.](/reference/react/useContext#passing-data-deeply-into-the-tree)

---

### Extracting logic into a custom Hook {/*extracting-logic-into-a-custom-hook*/}
### Extraindo a lógica em um Hook personalizado {/*extracting-logic-into-a-custom-hook*/}

Another approach you can try is to extract the "non-visual" logic into your own Hook, and use the information returned by your Hook to decide what to render. For example, you could write a `useList` custom Hook like this:
Outra abordagem que você pode tentar é extrair a lógica "não visual" em seu próprio Hook e usar as informações retornadas pelo seu Hook para decidir o que renderizar. Por exemplo, você pode escrever um Hook personalizado `useList` assim:

```js
import { useState } from 'react';
Expand All @@ -575,7 +574,7 @@ export default function useList(items) {
}
```

Then you could use it like this:
Em seguida, você pode usá-lo assim:

```js {2,9,13}
export default function App() {
Expand All @@ -598,7 +597,7 @@ export default function App() {
}
```

The data flow is explicit, but the state is inside the `useList` custom Hook that you can use from any component:
O fluxo de dados é explícito, mas o estado está dentro do Hook personalizado `useList` que você pode usar de qualquer componente:

<Sandpack>

Expand Down Expand Up @@ -691,4 +690,4 @@ button {

</Sandpack>

This approach is particularly useful if you want to reuse this logic between different components.
Essa abordagem é particularmente útil se você quiser reutilizar essa lógica entre diferentes componentes.