From 66d486d79d47b02b2dd2c8d335e4a7615e1b21b1 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Fri, 21 Jul 2023 12:16:04 +0200 Subject: [PATCH 1/3] copy(passing-props): translation up to challenges (excluded) --- .../learn/passing-props-to-a-component.md | 156 +++++++++--------- 1 file changed, 78 insertions(+), 78 deletions(-) diff --git a/src/content/learn/passing-props-to-a-component.md b/src/content/learn/passing-props-to-a-component.md index da5fc5efc..a3afeea13 100644 --- a/src/content/learn/passing-props-to-a-component.md +++ b/src/content/learn/passing-props-to-a-component.md @@ -1,26 +1,26 @@ --- -title: Passing Props to a Component +title: Passer des props à un composant --- -React components use *props* to communicate with each other. Every parent component can pass some information to its child components by giving them props. Props might remind you of HTML attributes, but you can pass any JavaScript value through them, including objects, arrays, and functions. +Les composants React utilisent des *props* pour communiquer entre eux. Chaque composant parent peut passer des informations à ses composants enfants en leur donnant des props. Les props vous rappellent peut-être les attributs HTML, mais vous pouvez y passer n'importe quelle valeur JavaScript, y compris des objets et des fonctions. -* How to pass props to a component -* How to read props from a component -* How to specify default values for props -* How to pass some JSX to a component -* How props change over time +* Comment passer des props à un composant +* Comment lire les props au sein d'un composant +* Comment spécifier des valeurs par défaut pour les props +* Comment passer du JSX à un composant +* Comment les props peuvent changer au fil du temps -## Familiar props {/*familiar-props*/} +## Props bien connues {/*familiar-props*/} -Props are the information that you pass to a JSX tag. For example, `className`, `src`, `alt`, `width`, and `height` are some of the props you can pass to an ``: +Les props sont des informations que vous passez à une balise JSX. Par exemple, une balise `` compte parmi ses props `className`, `src`, `alt`, `width` et `height` : @@ -51,11 +51,11 @@ body { min-height: 120px; } -The props you can pass to an `` tag are predefined (ReactDOM conforms to [the HTML standard](https://www.w3.org/TR/html52/semantics-embedded-content.html#the-img-element)). But you can pass any props to *your own* components, such as ``, to customize them. Here's how! +Les props que vous pouvez passer à une balise `` sont bien définies (ReactDOM respecte le [standard HTML](https://www.w3.org/TR/html52/semantics-embedded-content.html#the-img-element)). Mais vous pouvez passer les props de votre choix à *vos propres* composants, tels qu'``, pour les personnaliser. Voici comment faire ! -## Passing props to a component {/*passing-props-to-a-component*/} +## Passer des props à un composant {/*passing-props-to-a-component*/} -In this code, the `Profile` component isn't passing any props to its child component, `Avatar`: +Dans le code qui suit, le composant `Profile` ne passe aucune prop à son composant fils, `Avatar` : ```js export default function Profile() { @@ -65,11 +65,11 @@ export default function Profile() { } ``` -You can give `Avatar` some props in two steps. +Vous pouvez donner quelques props à `Avatar` en deux étapes. -### Step 1: Pass props to the child component {/*step-1-pass-props-to-the-child-component*/} +### Étape 1 : passez des props au composant enfant {/*step-1-pass-props-to-the-child-component*/} -First, pass some props to `Avatar`. For example, let's pass two props: `person` (an object), and `size` (a number): +Commencez par passer quelques props à `Avatar`. Par exemple, passons deux props : `person` (un objet) et `size` (un nombre) : ```js export default function Profile() { @@ -84,25 +84,25 @@ export default function Profile() { -If double curly braces after `person=` confuse you, recall [they're merely an object](/learn/javascript-in-jsx-with-curly-braces#using-double-curlies-css-and-other-objects-in-jsx) inside the JSX curlies. +Si les doubles accolades après `person=` vous déroutent, souvenez-vous qu'il s'agit [juste d'un littéral objet](/learn/javascript-in-jsx-with-curly-braces#using-double-curlies-css-and-other-objects-in-jsx) entre les accolades JSX. -Now you can read these props inside the `Avatar` component. +Vous pouvez maintenant lire ces props au sein du composant `Avatar`. -### Step 2: Read props inside the child component {/*step-2-read-props-inside-the-child-component*/} +### Étape 2 : lisez les props dans le composant enfant {/*step-2-read-props-inside-the-child-component*/} -You can read these props by listing their names `person, size` separated by the commas inside `({` and `})` directly after `function Avatar`. This lets you use them inside the `Avatar` code, like you would with a variable. +Vous pouvez lire ces props en listant leurs noms `person, size` séparés par des virgules entre `({` et `})` immédiatement après `function Avatar`. Ça vous permet de les utiliser dans le code d'`Avatar`, comme si vous aviez une variable locale. ```js function Avatar({ person, size }) { - // person and size are available here + // person et size sont disponibles ici } ``` -Add some logic to `Avatar` that uses the `person` and `size` props for rendering, and you're done. +Ajoutez un peu de logique à `Avatar` qui se base sur les props `person` et `size` pour le rendu, et vous y serez ! -Now you can configure `Avatar` to render in many different ways with different props. Try tweaking the values! +Vous pouvez désormais configurer `Avatar` pour s'afficher de différentes façons selon les valeurs de ses props. Essayez de jouer avec ces valeurs ! @@ -126,21 +126,21 @@ export default function Profile() {
-Props let you think about parent and child components independently. For example, you can change the `person` or the `size` props inside `Profile` without having to think about how `Avatar` uses them. Similarly, you can change how the `Avatar` uses these props, without looking at the `Profile`. +Les props vous permettent de réfléchir aux composants parent et enfant indépendamment. Par exemple, vous pouvez modifier les props `person` et `size` au sein de `Profile` sans avoir à vous préoccuper de comment `Avatar` les utilise. De la même façon, vous pouvez modifier l'utilisation interne de ces props par `Avatar` sans vous préoccuper de `Profile`. -You can think of props like "knobs" that you can adjust. They serve the same role as arguments serve for functions—in fact, props _are_ the only argument to your component! React component functions accept a single argument, a `props` object: +Vous pouvez concevoir les props comme des « molettes » que vous pouvez ajuster. Elles jouent le même rôle que les arguments des fonctions — enfait, les props *sont* le seul argument de votre composant ! Les fonctions composants React ne prennent qu'un argument, qui est l'objet `props` : ```js function Avatar(props) { @@ -180,11 +180,11 @@ function Avatar(props) { } ``` -Usually you don't need the whole `props` object itself, so you destructure it into individual props. +Le plus souvent vous n'aurez pas besoin de l'objet `props` lui-même en entier, vous le déstructurerez donc en props individuelles. -**Don't miss the pair of `{` and `}` curlies** inside of `(` and `)` when declaring props: +**N'oubliez pas la paire d'accolades `{` et `}`** entre les parenthèses `(` et `)` lorsque vous déclarez les props : ```js function Avatar({ person, size }) { @@ -192,7 +192,7 @@ function Avatar({ person, size }) { } ``` -This syntax is called ["destructuring"](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Unpacking_fields_from_objects_passed_as_a_function_parameter) and is equivalent to reading properties from a function parameter: +Cette syntaxe est appelée [« déstructuration »](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Unpacking_fields_from_objects_passed_as_a_function_parameter) *(le MDN parle de façon discutable de « décomposition », qui amalgame en prime ça et le rest/spread, NdT)* et c'est l'équivalent concis de la lecture des propriétés depuis le paramètre de la fonction : ```js function Avatar(props) { @@ -204,9 +204,9 @@ function Avatar(props) { -## Specifying a default value for a prop {/*specifying-a-default-value-for-a-prop*/} +## Spécifier une valeur par défaut pour une prop {/*specifying-a-default-value-for-a-prop*/} -If you want to give a prop a default value to fall back on when no value is specified, you can do it with the destructuring by putting `=` and the default value right after the parameter: +Si vous souhaitez donner une valeur par défaut à une prop pour qu'elle l'exploite lorsque le composant parent ne fournit pas de valeur, vous pouvez le faire dans la déstructuration en ajoutant `=` suivi de la valeur par défaut juste après le nom de la prop : ```js function Avatar({ person, size = 100 }) { @@ -214,13 +214,13 @@ function Avatar({ person, size = 100 }) { } ``` -Now, if `` is rendered with no `size` prop, the `size` will be set to `100`. +À présent, si `` est utilisé sans prop `size`, la `size` sera définie à `100`. -The default value is only used if the `size` prop is missing or if you pass `size={undefined}`. But if you pass `size={null}` or `size={0}`, the default value will **not** be used. +La valeur par défaut n'est utilisée que si la prop `size` est manquante ou que vous passez `size={undefined}`. Mais si vous passez `size={null}` ou `size={0}`, la valeur par défaut **ne sera pas** utilisée. -## Forwarding props with the JSX spread syntax {/*forwarding-props-with-the-jsx-spread-syntax*/} +## Transmettre des props avec la syntaxe de *spread* JSX {/*forwarding-props-with-the-jsx-spread-syntax*/} -Sometimes, passing props gets very repetitive: +Il peut arriver que passer des props soit très répétitif : ```js function Profile({ person, size, isSepia, thickBorder }) { @@ -237,7 +237,7 @@ function Profile({ person, size, isSepia, thickBorder }) { } ``` -There's nothing wrong with repetitive code—it can be more legible. But at times you may value conciseness. Some components forward all of their props to their children, like how this `Profile` does with `Avatar`. Because they don't use any of their props directly, it can make sense to use a more concise "spread" syntax: +Un tel code répétitif n'est pas problématique en soi — il peut même être plus lisible. Mais vous pourriez préférer la concision. Certains composants refilent toutes leurs props à leurs enfants, comme ce `Profile` le fait avec `Avatar`. Dans la mesure où ils n'utilisent pas leurs props directement, il peut être pertinent de recourir à la syntaxe de *spread*, nettement plus concise : ```js function Profile(props) { @@ -249,13 +249,13 @@ function Profile(props) { } ``` -This forwards all of `Profile`'s props to the `Avatar` without listing each of their names. +Ça transmet toutes les props de `Profile` à `Avatar` sans avoir à les lister chacune par leur nom. -**Use spread syntax with restraint.** If you're using it in every other component, something is wrong. Often, it indicates that you should split your components and pass children as JSX. More on that next! +**Utilisez la syntaxe de *spread* avec discernement.** Si vous l'utilisez dans de nombreux composants, c'est que quelque chose ne va pas. Le plus souvent, c'est un signe que vous devriez découper vos composants et passer du JSX enfant. On va voir comment tout de suite ! -## Passing JSX as children {/*passing-jsx-as-children*/} +## Passer du JSX comme enfant {/*passing-jsx-as-children*/} -It is common to nest built-in browser tags: +On imbrique fréquemment les balises natives du navigateur : ```js
@@ -263,7 +263,7 @@ It is common to nest built-in browser tags:
``` -Sometimes you'll want to nest your own components the same way: +Vous voudrez parfois faire de même avec vos propres composants : ```js @@ -271,7 +271,7 @@ Sometimes you'll want to nest your own components the same way: ``` -When you nest content inside a JSX tag, the parent component will receive that content in a prop called `children`. For example, the `Card` component below will receive a `children` prop set to `` and render it in a wrapper div: +Lorsque vous imbriquez du contenu dans une balise JSX, le composant parent reçoit ce contenu sous forme d'une prop appelée `children`. Par exemple, le composant `Card` ci-dessous recevra une prop `children` qui vaudra `` et l'affichera dans une div d'enrobage : @@ -291,7 +291,7 @@ export default function Profile() { -Try replacing the `` inside `` with some text to see how the `Card` component can wrap any nested content. It doesn't need to "know" what's being rendered inside of it. You will see this flexible pattern in many places. +Tentez de remplacer le `` au sein de `` avec du texte pour constater que le composant `Card` peut enrober n'importe quel contenu imbriqué. Il n'a pas besoin de « savoir » ce qui est affiché à l'intérieur de lui. Vous retrouverez cette approche flexible dans de nombreux endroits. -You can think of a component with a `children` prop as having a "hole" that can be "filled in" by its parent components with arbitrary JSX. You will often use the `children` prop for visual wrappers: panels, grids, etc. +Vous pouvez concervoir la prop `children` d'un composant comme une sorte de « trou » qui peut être « rempli » par les composants parents avec du JSX quelconque. Vous utiliserez souvent la prop `children` pour des enrobages visuels : panneaux, grilles, etc. - + -## How props change over time {/*how-props-change-over-time*/} +## Les props changent avec le temps {/*how-props-change-over-time*/} -The `Clock` component below receives two props from its parent component: `color` and `time`. (The parent component's code is omitted because it uses [state](/learn/state-a-components-memory), which we won't dive into just yet.) +Le composant `Clock` ci-dessous reçoit deux props de son composant parent : `color` et `time`. (Le code du composant parent est laissé de côté parce qu'il utilise un [état](/learn/state-a-components-memory), concept que nous n'avons pas encore exploré.) -Try changing the color in the select box below: +Essayez de modifier la couleur dans la liste déroulante : @@ -392,7 +392,7 @@ export default function App() { return (

- Pick a color:{' '} + Choisissez une couleur :{' '}