isValidElement

isValidElement בודקת האם ערך הוא React אלמנט.

const isElement = isValidElement(value)

הפניה
- isValidElement(value)
שימוש
- בדיקה אם משהו הוא React element

הפניה

`isValidElement(value)`

קראו ל-isValidElement(value) כדי לבדוק האם value הוא React אלמנט.

import { isValidElement, createElement } from 'react';

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

// ❌ Not React elements
console.log(isValidElement(25)); // false
console.log(isValidElement('Hello')); // false
console.log(isValidElement({ age: 42 })); // false

עוד דוגמאות נוספות.

פרמטרים

value: הערך שברצונכם לבדוק. הוא יכול להיות מכל סוג.

מחזירה

isValidElement מחזירה true אם value הוא React אלמנט. אחרת היא מחזירה false.

אזהרות

רק JSX תגיות ואובייקטים שמוחזרים מ-createElement נחשבים ל-React אלמנטים. למשל, למרות שמספר כמו MK_1 הוא לא 42 הוא *ו42 תחזיר אותו, אלמנט React תקין. גם מערכים ו-פורטלים מיוחדים עם createPortal לא נחשבים React אלמנטים.

שימוש

בדיקה אם משהו הוא React element

קראו ל-isValidElement כדי לבדוק אם ערך הוא React אלמנט.

React אלמנטים הם:

ערכים יוצרים מכתיבת JSX tag
ערכים יוצרים מקריאה ל-createElement

עבור אלמנטים React, isValidElement מחזירה true:

import { isValidElement, createElement } from 'react';

// ✅ JSX tags are React elements
console.log(isValidElement(<p />)); // true
console.log(isValidElement(<MyComponent />)); // true

// ✅ Values returned by createElement are React elements
console.log(isValidElement(createElement('p'))); // true
console.log(isValidElement(createElement(MyComponent))); // true

כל ערך אחר, כמו מחרוזות, מספרים או אובייקטים וערכים שרירותיים, אינו React אלמנט.

עבורם, isValidElement מחזירה false:

// ❌ These are *not* React elements
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

נדיר מאוד שצריך isValidElement. לרוב שימושי רק כשקוראים ל-API אחר שמקבל רק אלמנטים (כמו cloneElement) ורוצים ממש משגיאה כשהארגומנט אינו React אלמנט.

אלא אם יש לכם סיבה מאוד ספציפית להוסיף בדיקת isValidElement, כנראה שאין צורך.

Deep Dive

React אלמנטים לעומת React צמתים

כשכותבים קומפונטה, אפשר להחזיר ממנה כל סוג של צומת React:

function MyComponent() {
  // ... you can return any React node ...
}

צומת React יכול להיות:

React אלמנט עיצוב כמו <div /> או createElement('div')
פורטל מיוחד עם createPortal
מחרוזת
מספר
true, false, null, או undefined (שאינם מוצגים)
מערך של React צמתים אחרים

שימו לב ש-isValidElement בודקת האם הארגומנט הוא React element, ולא האם הוא React node. לדוגמה, 42 אינו React אלמנט תקין. עם זאת, הוא React צומת תקין לחלוטין:

function MyComponent() {
  return 42; // It's ok to return a number from component
}

לא כדאי להשתמש ב-isValidElement כדי לברר אם משהו ניתן לרינדור.

PreviouscreateRef

NextPureComponent