{Children.map(children, (child, index) =>
cloneElement(child, {
- isHighlighted: index === selectedIndex
+ isHighlighted: index === selectedIndex
})
)}
```
-Let's say the original JSX received by `List` looks like this:
+Disons que le JSX d'origine reçu par `List` ressemble à ça :
```js {2-4}
- |
- |
- |
+ |
+ |
+ |
```
-By cloning its children, the `List` can pass extra information to every `Row` inside. The result looks like this:
+En clonant ses enfants, la `List` peut passer des infos supplémentaires à chaque `Row` qu'elle contient. Le résultat ressemblerait à ceci :
```js {4,8,12}
|
|
|
```
-Notice how pressing "Next" updates the state of the `List`, and highlights a different row:
+Voyez comme le fait de presser « Suivant » met à jour l'état de la `List` et met en exergue une ligne différente :
@@ -152,7 +152,7 @@ export default function App() {
{products.map(product =>
|
)}
@@ -169,7 +169,7 @@ export default function List({ children }) {
{Children.map(children, (child, index) =>
cloneElement(child, {
- isHighlighted: index === selectedIndex
+ isHighlighted: index === selectedIndex
})
)}
@@ -178,7 +178,7 @@ export default function List({ children }) {
(i + 1) % Children.count(children)
);
}}>
- Next
+ Suivant
);
@@ -200,9 +200,9 @@ export default function Row({ title, isHighlighted }) {
```js data.js
export const products = [
- { title: 'Cabbage', id: 1 },
- { title: 'Garlic', id: 2 },
- { title: 'Apple', id: 3 },
+ { title: 'Chou', id: 1 },
+ { title: 'Ail', id: 2 },
+ { title: 'Pomme', id: 3 },
];
```
@@ -232,11 +232,11 @@ button {
-To summarize, the `List` cloned the `
|
` elements it received and added an extra prop to them.
+En résumé, la `List` a cloné les éléments `
|
` qu'elle a reçus et leur a ajouté une prop supplémentaire.
-Cloning children makes it hard to tell how the data flows through your app. Try one of the [alternatives.](#alternatives)
+Le clonage des nœuds enfants complexifie le flux de données dans votre appli : vous devriez donc plutôt essayer une des [alternatives](#alternatives).
@@ -244,9 +244,9 @@ Cloning children makes it hard to tell how the data flows through your app. Try
## Alternatives {/*alternatives*/}
-### Passing data with a render prop {/*passing-data-with-a-render-prop*/}
+### Passer des données *via* une prop de rendu {/*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:
+Plutôt que d'utiliser `cloneElement`, envisagez d'accepter une *prop de rendu* *(render prop, NdT)* du genre `renderItem`. Ci-dessous, `List` reçoit une prop `renderItem`. `List` appelle `renderItem` pour chaque élément et lui passe `isHighlighted` comme argument :
```js {1,7}
export default function List({ items, renderItem }) {
@@ -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 `
` with the given `isHighlighted` value:
+La prop `renderItem` est appelée « prop de rendu » parce que c'est une prop indiquant *comment* faire le rendu de quelque chose. Vous pouvez par exemple passer une implémentation de `renderItem` qui produit une `` avec la valeur `isHighlighted` reçue :
```js {3,7}
```
-The end result is the same as with `cloneElement`:
+Le résultat final est identique à la version basée sur `cloneElement` :
```js {4,8,12}
|
|
|
```
-However, you can clearly trace where the `isHighlighted` value is coming from.
+En revanche, il est plus facile de pister l'origine de la valeur `isHighlighted`.
@@ -335,7 +335,7 @@ export default function List({ items, renderItem }) {
(i + 1) % items.length
);
}}>
- Next
+ Suivant