isValidElement

const isElement = isValidElement(value)

• Reference
  • isValidElement(value)
• Usage
  • Verificare se qualcosa è un elemento React

Reference

isValidElement(value)

Chiama isValidElement(value) per verificare se value è un elemento React.

import { isValidElement, createElement } from 'react';

// ✅ Elementi React
console.log(isValidElement(<p />)); // true
console.log(isValidElement(createElement('p'))); // true

// ❌ Non sono elementi React
console.log(isValidElement(25)); // false
console.log(isValidElement('Hello')); // false
console.log(isValidElement({ age: 42 })); // false

Vedi altri esempi sotto.

Parameters

• value: Il valore che vuoi verificare. Può essere di qualsiasi tipo.

Returns

isValidElement restituisce true se value è un elemento React. Altrimenti, restituisce false.

Caveats

• Solo i tag JSX e gli oggetti restituiti da createElement sono considerati elementi React. Ad esempio, anche se un numero come 42 è un nodo React valido (e può essere restituito da un componente), non è un elemento React valido. Anche gli array e i portali creati con createPortal non sono considerati elementi React.

Usage

Verificare se qualcosa è un elemento React

Chiama isValidElement per verificare se un valore è un elemento React.

Gli elementi React sono:

• Valori prodotti scrivendo un tag JSX
• Valori prodotti chiamando createElement

Per gli elementi React, isValidElement restituisce true:

import { isValidElement, createElement } from 'react';

// ✅ I tag JSX sono elementi React
console.log(isValidElement(<p />)); // true
console.log(isValidElement(<MyComponent />)); // true

// ✅ I valori restituiti da createElement sono elementi React
console.log(isValidElement(createElement('p'))); // true
console.log(isValidElement(createElement(MyComponent))); // true

Qualsiasi altro valore, come stringhe, numeri o oggetti e array arbitrari, non è un elemento React.

Per questi, isValidElement restituisce false:

// ❌ Questi *non* sono elementi React
console.log(isValidElement(null)); // false
console.log(isValidElement(25)); // false
console.log(isValidElement('Hello')); // false
console.log(isValidElement({ age: 42 })); // false
console.log(isValidElement([<div />, <div />])); // false
console.log(isValidElement(MyComponent)); // false

È molto raro aver bisogno di isValidElement. È soprattutto utile se stai chiamando un’altra API che accetta solo elementi (come fa cloneElement) e vuoi evitare un errore quando il tuo argomento non è un elemento React.

A meno che tu non abbia un motivo molto specifico per aggiungere un controllo con isValidElement, probabilmente non ne hai bisogno.

function MyComponent() {
  // ... puoi restituire qualsiasi nodo React ...
}

function MyComponent() {
  return 42; // Va bene restituire un numero da un componente
}