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.

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

Translation of the isValidElement page #554

Merged
merged 2 commits into from
Aug 15, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
1 change: 1 addition & 0 deletions TRANSLATORS.md
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ Voici la liste par ordre alphabétique (prénom, nom). **🙏🏻 Mille mercis
<li><a href="https://fr.react.dev/reference/react/createElement"><code>createElement</code></a></li>
<li><a href="https://fr.react.dev/reference/react/createFactory"><code>createFactory</code></a></li>
<li><a href="https://fr.react.dev/reference/react/createRef"><code>createRef</code></a></li>
<li><a href="https://fr.react.dev/reference/react/isValidElement"><code>isValidElement</code></a></li>
</ul>
</td>
</tr>
Expand Down
80 changes: 40 additions & 40 deletions src/content/reference/react/isValidElement.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: isValidElement

<Intro>

`isValidElement` checks whether a value is a React element.
`isValidElement` vérifie qu'une valeur est un élément React.

```js
const isElement = isValidElement(value)
Expand All @@ -16,113 +16,113 @@ const isElement = isValidElement(value)

---

## Reference {/*reference*/}
## Référence {/*reference*/}

### `isValidElement(value)` {/*isvalidelement*/}

Call `isValidElement(value)` to check whether `value` is a React element.
Appelez `isValidElement(value)` pour vérifier si `value` est un élément React.

```js
import { isValidElement, createElement } from 'react';

// ✅ React elements
// ✅ Éléments React
console.log(isValidElement(<p />)); // true
console.log(isValidElement(createElement('p'))); // true

// ❌ Not React elements
// ❌ Pas des éléments React
console.log(isValidElement(25)); // false
console.log(isValidElement('Hello')); // false
console.log(isValidElement({ age: 42 })); // false
```

[See more examples below.](#usage)
[Voir d'autres exemples ci-dessous](#usage).

#### Parameters {/*parameters*/}
#### Paramètres {/*parameters*/}

* `value`: The `value` you want to check. It can be any a value of any type.
* `value` : la valeur que vous souhaitez vérifier. Elle peut être de n'importe quel type.

#### Returns {/*returns*/}
#### Valeur renvoyée {/*returns*/}

`isValidElement` returns `true` if the `value` is a React element. Otherwise, it returns `false`.
`isValidElement` renvoie `true` si `value` est un élément React. Dans le cas contraire, elle renvoie `false`.

#### Caveats {/*caveats*/}
#### Limitations {/*caveats*/}

* **Only [JSX tags](/learn/writing-markup-with-jsx) and objects returned by [`createElement`](/reference/react/createElement) are considered to be React elements.** For example, even though a number like `42` is a valid React *node* (and can be returned from a component), it is not a valid React element. Arrays and portals created with [`createPortal`](/reference/react-dom/createPortal) are also *not* considered to be React elements.
* **Seuls les [balises JSX](/learn/writing-markup-with-jsx) et les objets renvoyés par [`createElement`](/reference/react/createElement) sont considérés comme des éléments React.** Par exemple, même si un nombre comme `42` est un *nœud* React valide (et peut être renvoyé par un composant), il ne constitue pas un élément React valide. Les tableaux et les portails créés par [`createPortal`](/reference/react-dom/createPortal) ne sont pas *non plus* considérés comme des éléments React.

---

## Usage {/*usage*/}
## Utilisation {/*usage*/}

### Checking if something is a React element {/*checking-if-something-is-a-react-element*/}
### Vérifier si quelque chose est un élément React {/*checking-if-something-is-a-react-element*/}

Call `isValidElement` to check if some value is a *React element.*
Appelez `isValidElement` pour vérifier si une valeur est un *élément React*.

React elements are:
Les éléments React sont :

- Values produced by writing a [JSX tag](/learn/writing-markup-with-jsx)
- Values produced by calling [`createElement`](/reference/react/createElement)
- Les valeurs produites en écrivant une [balise JSX](/learn/writing-markup-with-jsx)
- Les valeurs produites en appelant [`createElement`](/reference/react/createElement)

For React elements, `isValidElement` returns `true`:
Pour les éléments React, `isValidElement` renvoie `true` :

```js
import { isValidElement, createElement } from 'react';

// ✅ JSX tags are React elements
// ✅ Les balises JSX sont des éléments React
console.log(isValidElement(<p />)); // true
console.log(isValidElement(<MyComponent />)); // true

// ✅ Values returned by createElement are React elements
// ✅ Les valeurs renvoyées par createElement sont des éléments React
console.log(isValidElement(createElement('p'))); // true
console.log(isValidElement(createElement(MyComponent))); // true
```

Any other values, such as strings, numbers, or arbitrary objects and arrays, are not React elements.
Tout autre valeur, comme les chaînes de caractères, les nombres, un objet ou tableau quelconque, ne constitue pas un élément React.

For them, `isValidElement` returns `false`:
Dans leur cas, `isValidElement` renvoie `false` :

```js
// ❌ These are *not* React elements
// ❌ Ce ne sont *pas* des éléments React
console.log(isValidElement(null)); // false
console.log(isValidElement(25)); // false
console.log(isValidElement('Hello')); // false
console.log(isValidElement('Bonjour')); // false
console.log(isValidElement({ age: 42 })); // false
console.log(isValidElement([<div />, <div />])); // false
console.log(isValidElement(MyComponent)); // false
```

It is very uncommon to need `isValidElement`. It's mostly useful if you're calling another API that *only* accepts elements (like [`cloneElement`](/reference/react/cloneElement) does) and you want to avoid an error when your argument is not a React element.
On a très rarement besoin d'`isValidElement`. Elle est principalement utile lorsque vous appelez une autre API qui n'accepte *que* des éléments React (à l'instar de [`cloneElement`](/reference/react/cloneElement)) et que vous voulez éviter une erreur si votre argument n'est pas un élément React.

Unless you have some very specific reason to add an `isValidElement` check, you probably don't need it.
À moins que vous n'ayez une raison très précise d'ajouter une vérification `isValidElement`, vous n'en aurez probablement jamais besoin.

<DeepDive>

#### React elements vs React nodes {/*react-elements-vs-react-nodes*/}
#### Éléments React vs. nœuds React {/*react-elements-vs-react-nodes*/}

When you write a component, you can return any kind of *React node* from it:
Lorsque vous écrivez un composant, vous pouvez lui faire renvoyer n'importe quel *nœud React* :

```js
function MyComponent() {
// ... you can return any React node ...
// ... vous pouvez renvoyer n'importe quel nœud React ...
}
```

A React node can be:
Un nœud React peut être :

- A React element created like `<div />` or `createElement('div')`
- A portal created with [`createPortal`](/reference/react-dom/createPortal)
- A string
- A number
- `true`, `false`, `null`, or `undefined` (which are not displayed)
- An array of other React nodes
- Un élément React créé avec JSX (tel que `<div />`) ou `createElement('div')`
- Un portail créé par [`createPortal`](/reference/react-dom/createPortal)
- Une chaîne de caractères
- Un nombre
- `true`, `false`, `null` ou `undefined` (qui ne sont pas affichés)
- Un tableau d'autres nœuds React

**Note `isValidElement` checks whether the argument is a *React element,* not whether it's a React node.** For example, `42` is not a valid React element. However, it is a perfectly valid React node:
**Remarquez que `isValdiElement` vérifie que son argument est un *élément React*, pas un nœud React.** Par exemple, `42` ne constitue pas un élément React valide. En revanche, c'est un nœud React parfaitement acceptable :

```js
function MyComponent() {
return 42; // It's ok to return a number from component
return 42; // Vous pouvez renvoyer un nombre depuis votre composant
}
```

This is why you shouldn't use `isValidElement` as a way to check whether something can be rendered.
C'est pourquoi vous ne devriez pas utiliser `isValidElement` pour vérifier qu'une valeur peut être affichée (c'est-à-dire renvoyée par un composant).

</DeepDive>