`, export a `Row` component, and manually wrap every row into it like this:
+Autant que possible, évitez les méthodes de `Children`. Si par exemple vous souhaitez que chaque enfant d'une `RowList` soit enrobé par un `
`, exportez un composant `Row` et enrobez chaque ligne avec manuellement, comme ceci :
@@ -559,13 +559,13 @@ export default function App() {
return (
- This is the first item.
+ Voici le premier élément.
- This is the second item.
+ Voici le deuxième.
- This is the third item.
+ Et voici le troisième.
);
@@ -607,7 +607,7 @@ export function Row({ children }) {
-Unlike using `Children.map`, this approach does not wrap every child automatically. **However, this approach has a significant benefit compared to the [earlier example with `Children.map`](#transforming-children) because it works even if you keep extracting more components.** For example, it still works if you extract your own `MoreRows` component:
+Contrairement au recours à `Children.map`, cette approche n'enrobe pas automatiquement chaque enfant. **Ceci dit, cette approche a un avantage considérable par rapport à [l'exemple précédent avec `Children.map`](#transforming-children), parce qu'elle marche même si vous continuez à extraire davantage de composants.** Par exemple, elle fonctionnera toujours si vous extrayez votre propre composant `MoreRows` :
@@ -618,7 +618,7 @@ export default function App() {
return (
- This is the first item.
+ Voici le premier élément.
@@ -629,10 +629,10 @@ function MoreRows() {
return (
<>
- This is the second item.
+ Voici le deuxième.
- This is the third item.
+ Et voici le troisième.
);
@@ -674,13 +674,13 @@ export function Row({ children }) {
-This wouldn't work with `Children.map` because it would "see" `
` as a single child (and a single row).
+Ça ne fonctionnerait pas avec `Children.map` parce qu'elle « verrait » `
` comme un enfant unique (et donc une ligne unique).
---
-### Accepting an array of objects as a prop {/*accepting-an-array-of-objects-as-a-prop*/}
+### Accepter un tableau d'objets comme prop {/*accepting-an-array-of-objects-as-a-prop*/}
-You can also explicitly pass an array as a prop. For example, this `RowList` accepts a `rows` array as a prop:
+Vous pouvez aussi passer explicitement un tableau comme prop. La `RowList` ci-dessous accepte par exemple un tableau pour sa prop `rows` :
@@ -690,9 +690,9 @@ import { RowList, Row } from './RowList.js';
export default function App() {
return (
This is the first item. },
- { id: 'second', content: This is the second item.
},
- { id: 'third', content: This is the third item.
}
+ { id: 'first', content: Voici le premier élément.
},
+ { id: 'second', content: Voici le deuxième.
},
+ { id: 'third', content: Et voici le troisième.
}
]} />
);
}
@@ -729,9 +729,9 @@ export function RowList({ rows }) {
-Since `rows` is a regular JavaScript array, the `RowList` component can use built-in array methods like [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) on it.
+Dans la mesure où `rows` est un tableau JavaScript standard, le composant `RowList` peut utiliser ses méthodes de tableau natives, telles que [`map`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/map).
-This pattern is especially useful when you want to be able to pass more information as structured data together with children. In the below example, the `TabSwitcher` component receives an array of objects as the `tabs` prop:
+Cette approche est particulièrement utile lorsque vous souhaitez pouvoir passer davantage d'informations structurées en complément des enfants. Dans l'exemple qui suit, le composant `TabSwitcher` reçoit un tableau d'objets dans sa prop `tabs` :
@@ -743,18 +743,18 @@ export default function App() {
This is the first item.
+ header: 'Premier',
+ content: Voici le premier élément.
},
{
id: 'second',
- header: 'Second',
- content: This is the second item.
+ header: 'Deuxième',
+ content: Voici le deuxième.
},
{
id: 'third',
- header: 'Third',
- content: This is the third item.
+ header: 'Troisième',
+ content: Et voici le troisième.
}
]} />
);
@@ -789,13 +789,13 @@ export default function TabSwitcher({ tabs }) {
-Unlike passing the children as JSX, this approach lets you associate some extra data like `header` with each item. Because you are working with the `tabs` directly, and it is an array, you do not need the `Children` methods.
+Contrairement au passage des enfants par JSX, cette approche vous permet d'associer des données supplémentaires à chaque élément, comme par exemple `header`. Puisque vous travaillez directement avec `tabs` et qu'il s'agit d'un tableau, vous n'avez pas besoin des méthodes de `Children`.
---
-### Calling a render prop to customize rendering {/*calling-a-render-prop-to-customize-rendering*/}
+### Appeler une *prop de rendu* pour personnaliser le rendu {/*calling-a-render-prop-to-customize-rendering*/}
-Instead of producing JSX for every single item, you can also pass a function that returns JSX, and call that function when necessary. In this example, the `App` component passes a `renderContent` function to the `TabSwitcher` component. The `TabSwitcher` component calls `renderContent` only for the selected tab:
+Plutôt que de produire du JSX pour chaque élément individuel, vous pouvez passer une fonction qui renverra ce JSX, puis appeler cette fonction lorsque nécessaire. Dans l'exemple ci-après, le composant `App` passe une fonction `renderContent` au composant `TabSwitcher`. Le composant `TabSwitcher` appelle `renderContent` uniquement pour l'onglet sélectionné :
@@ -805,12 +805,12 @@ import TabSwitcher from './TabSwitcher.js';
export default function App() {
return (
{
return tabId[0].toUpperCase() + tabId.slice(1);
}}
renderContent={tabId => {
- return This is the {tabId} item.
;
+ return Voici le {tabId} élément.
;
}}
/>
);
@@ -844,9 +844,9 @@ export default function TabSwitcher({ tabIds, getHeader, renderContent }) {
-A prop like `renderContent` is called a *render prop* because it is a prop that specifies how to render a piece of the user interface. However, there is nothing special about it: it is a regular prop which happens to be a function.
+Une prop comme `renderContent` est appelée une *prop de rendu* parce qu'elle décrit comment faire le rendu d'un bout d'interface utilisateur. Ceci étant dit, elle n'a rien de spécial : c'est une prop comme une autre, dont la valeur se trouve être une fonction.
-Render props are functions, so you can pass information to them. For example, this `RowList` component passes the `id` and the `index` of each row to the `renderRow` render prop, which uses `index` to highlight even rows:
+Les props de rendu sont des fonctions, vous pouvez donc leur passer des informations. Le composant `RowList` ci-dessous passe par exemple l'`id` et l'`index` de chaque ligne à la prop de rendu `renderRow`, qui utilise `index` pour mettre en exergue les lignes paires :
@@ -856,12 +856,12 @@ import { RowList, Row } from './RowList.js';
export default function App() {
return (
{
return (
- This is the {id} item.
-
+ Voici le {id} élément
+
);
}}
/>
@@ -876,7 +876,7 @@ export function RowList({ rowIds, renderRow }) {
return (
- Total rows: {rowIds.length}
+ Nombre de lignes : {rowIds.length}
{rowIds.map((rowId, index) =>
@@ -927,23 +927,23 @@ export function Row({ children, isHighlighted }) {
-This is another example of how parent and child components can cooperate without manipulating the children.
+C'est un autre exemple de coopération entre composants parents et enfants sans manipulation des enfants.
---
-## Troubleshooting {/*troubleshooting*/}
+## Dépannage {/*troubleshooting*/}
-### I pass a custom component, but the `Children` methods don't show its render result {/*i-pass-a-custom-component-but-the-children-methods-dont-show-its-render-result*/}
+### Je passe un composant personnalisé, mais les méthodes de `Children` n'affichent pas son rendu {/*i-pass-a-custom-component-but-the-children-methods-dont-show-its-render-result*/}
-Suppose you pass two children to `RowList` like this:
+Supposons que vous passiez deux enfants à `RowList` comme ceci :
```js
- First item
+ Premier élément
```
-If you do `Children.count(children)` inside `RowList`, you will get `2`. Even if `MoreRows` renders 10 different items, or if it returns `null`, `Children.count(children)` will still be `2`. From the `RowList`'s perspective, it only "sees" the JSX it has received. It does not "see" the internals of the `MoreRows` component.
+Si vous faites un `Children.count(children)` au sein de `RowList`, vous obtiendrez `2`. Même si `MoreRows` produit 10 éléments différents, ou s’il renvoie `null`, `Children.count(children)` vaudra tout de même `2`. Du point de vue de `RowList`, il ne « voit » que le JSX qu'il reçoit. Il ne « voit » pas la tambouille interne du composant `MoreRows`.
-The limitation makes it hard to extract a component. This is why [alternatives](#alternatives) are preferred to using `Children`.
+Cette limitation complexifie l'extraction d'une partie du contenu dans un composant dédié. C'est pourquoi vous devriez préférer les [alternatives](#alternatives) à l'utilisation de `Children`.