isValidElement

const isElement = isValidElement(value)

• Reference
  • isValidElement(value)
• שימוש
  • בדיקה אם משהו הוא React element

Reference

isValidElement(value)

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

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

ראו דוגמאות נוספות בהמשך.

Parameters

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

Returns

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

Caveats

• רק JSX tags ואובייקטים שמוחזרים מ-createElement נחשבים ל-React elements. למשל, למרות שמספר כמו 42 הוא React node תקין (ואפשר להחזיר אותו מקומפוננטה), הוא לא React element תקין. גם מערכים ו-portals שנוצרו עם createPortal לא נחשבים React elements.

שימוש

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

קראו ל-isValidElement כדי לבדוק אם ערך כלשהו הוא React element.

React elements הם:

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

עבור React elements, 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 element.

עבורם, 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 אחר שמקבל רק elements (כמו cloneElement) ורוצים להימנע משגיאה כשהארגומנט אינו React element.

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

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

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