createElement

const element = createElement(type, props, ...children)

• Reference
  • createElement(type, props, ...children)
• שימוש
  • יצירת element בלי JSX

Reference

createElement(type, props, ...children)

קראו ל-createElement כדי ליצור React element עם type, props ו-children נתונים.

import { createElement } from 'react';

function Greeting({ name }) {
  return createElement(
    'h1',
    { className: 'greeting' },
    'Hello'
  );
}

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

Parameters

• type: הארגומנט type חייב להיות סוג קומפוננטת React תקין. למשל, מחרוזת שם תגית (כמו 'div' או 'span'), או קומפוננטת React (פונקציה, class, או קומפוננטה מיוחדת כמו Fragment).

• props: הארגומנט props חייב להיות אובייקט או null. אם תעבירו null, הוא יטופל כמו אובייקט ריק. React תיצור element עם props תואמים ל-props שהעברתם. שימו לב ש-ref ו-key מתוך אובייקט ה-props שלכם הם מיוחדים, ולכן לא יהיו זמינים כ-element.props.ref ו-element.props.key על ה-element המוחזר. הם יהיו זמינים כ-element.ref ו-element.key.

• אופציונלי ...children: אפס או יותר child nodes. הם יכולים להיות כל סוג של React nodes, כולל React elements, מחרוזות, מספרים, portals, nodes ריקים (null, undefined, true, ו-false), ומערכים של React nodes.

Returns

createElement מחזירה אובייקט React element עם כמה מאפיינים:

• type: ה-type שהעברתם.
• props: ה-props שהעברתם, למעט ref ו-key. אם type היא קומפוננטה עם legacy type.defaultProps, אז כל props חסרים או undefined יקבלו את הערכים מתוך type.defaultProps.
• ref: ה-ref שהעברתם. אם חסר, null.
• key: ה-key שהעברתם, מומר למחרוזת. אם חסר, null.

בדרך כלל תחזירו את ה-element מהקומפוננטה שלכם או תהפכו אותו ל-child של element אחר. למרות שאפשר לקרוא את מאפייני ה-element, עדיף להתייחס לכל element כלא שקוף אחרי יצירתו ורק לרנדר אותו.

Caveats

• צריך להתייחס ל-React elements ול-props שלהם כ-immutable ולעולם לא לשנות את התוכן שלהם אחרי יצירה. בזמן פיתוח, React תבצע freeze רדוד ל-element המוחזר ולמאפיין props שלו כדי לאכוף זאת.

• כשמשתמשים ב-JSX, חייבים להתחיל תגית באות גדולה כדי לרנדר custom component. כלומר, <Something /> שקול ל-createElement(Something), אבל <something /> (אותיות קטנות) שקול ל-createElement('something') (שימו לב שזו מחרוזת, ולכן תטופל כתגית HTML מובנית).

• כדאי להעביר children כארגומנטים מרובים ל-createElement רק אם כולם ידועים סטטית, כמו createElement('h1', {}, child1, child2, child3). אם הילדים דינמיים, העבירו את כל המערך כארגומנט שלישי: createElement('ul', {}, listItems). כך React תוכל להזהיר על keys חסרים עבור רשימות דינמיות. לרשימות סטטיות אין צורך בכך כי הן לא משנות סדר.

שימוש

יצירת element בלי JSX

אם אתם לא אוהבים JSX או לא יכולים להשתמש בה בפרויקט, אפשר להשתמש ב-createElement כחלופה.

כדי ליצור element בלי JSX, קראו ל-createElement עם type, props, ו-children:

import { createElement } from 'react';

function Greeting({ name }) {
  return createElement(
    'h1',
    { className: 'greeting' },
    'Hello ',
    createElement('i', null, name),
    '. Welcome!'
  );
}

ה-children אופציונליים, ואפשר להעביר כמה שצריך (בדוגמה למעלה יש שלושה children). הקוד הזה יציג כותרת <h1> עם ברכה. להשוואה, הנה אותה דוגמה שנכתבה עם JSX:

function Greeting({ name }) {
  return (
    <h1 className="greeting">
      Hello <i>{name}</i>. Welcome!
    </h1>
  );
}

כדי לרנדר קומפוננטת React משלכם, העבירו פונקציה כמו Greeting כ-type במקום מחרוזת כמו 'h1':

export default function App() {
  return createElement(Greeting, { name: 'Taylor' });
}

עם JSX זה היה נראה כך:

export default function App() {
  return <Greeting name="Taylor" />;
}

הנה דוגמה מלאה שנכתבה עם createElement:

והנה אותה דוגמה כשהיא כתובה עם JSX:

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

// Slightly simplified
{
  type: Greeting,
  props: {
    name: 'Taylor'
  },
  key: null,
  ref: null,
}