Deprecated

ה-API הזה יוסר בגרסה ראשית עתידית של React. ראו חלופות.

createFactory מאפשרת ליצור פונקציה שמייצרת React elements סוג נתון.

const factory = createFactory(type)

הפניה

createFactory(type)

קראו ל-createFactory(type) כדי ליצור פונקציית factory שמייצרת React elements סטייל type נתון.

import { createFactory } from 'react';

const button = createFactory('button');

ואז אפשר להשתמש בה כדי ליצור React אלמנטים בלי JSX:

export default function App() {
  return button({
    onClick: () => {
      alert('Clicked!')
    }
  }, 'Click me');
}

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

פרמטרים

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

מחזירה

מחזירה פונקציית. פונקציית ה-factory הזו מקבלת אובייקט props כארגומנט ראשון, אחריו רשימת ארגומנטים ...children, ומחזירה React אלמנט עם ה-type, ה-props וה-children בימים.

שימוש

יצירת React אלמנטים עם מפעל

למרות שרוב פרויקטי React משתמשים ב-JSX כדי לתאר את ממשק המשתמש, JSX אינה חובה. בעבר, createFactory אחת הדרכים לתאר ממש הייתהק משתמש בלי JSX.

קראו ל-createFactory כדי ליצור פונקציית מפעל סוג אלמנט מסוים כמו 'button':

import { createFactory } from 'react';

const button = createFactory('button');

קריאה לפונקציית ה-factory הזו תייצר React אלמנטים עם ה-props וה-ילדים שסיפקתם:

import { createFactory } from 'react';

const button = createFactory('button');

export default function App() {
  return button({
    onClick: () => {
      alert('Clicked!')
    }
  }, 'Click me');
}

כך השתמשו ב-createFactory כחלופה ל-JSX. אבל createFactory הוצאה משימוש, ולא כדאי לקרוא לה בקוד חדש. ראו בהמשך איך לבצע מיגרציה מ-createFactory.

חלופות

העתקת createFactory בתוך הפרויקט שלכם

אם בפרויקט שלכם יש הרבה קריאות ל-createFactory, העתיקות את המימוש הבא של createFactory.js לתוך הפרויקט:

import { createFactory } from './createFactory.js';

const button = createFactory('button');

export default function App() {
  return button({
    onClick: () => {
      alert('Clicked!')
    }
  }, 'Click me');
}

כך אפשר להשאיר את כל הקוד ללא שינוי מלבד הייבואים.

החלפת createFactory ב-createElement

אם יש לכם מעט קריאות ל-createFactory ואתם לא מתנגדים לבצע את המרה ידנית, ואתם לא רוצים להשתמש ב-JSX, אפשר להחליף את כל קריאה לפונקציית factory בקריאה ל-createElement. למשל, אפשר להחליף את הקוד הזה:

import { createFactory } from 'react';

const button = createFactory('button');

export default function App() {
  return button({
    onClick: () => {
      alert('Clicked!')
    }
  }, 'Click me');
}

בקוד הזה:

import { createElement } from 'react';

export default function App() {
  return createElement('button', {
    onClick: () => {
      alert('Clicked!')
    }
  }, 'Click me');
}

הנה דוגמה מלאה ב-React ללא JSX:

import { createElement } from 'react';

export default function App() {
  return createElement('button', {
    onClick: () => {
      alert('Clicked!')
    }
  }, 'Click me');
}

החלפת createFactory ב-JSX

לבסוף, אפשר להשתמש ב-JSX במקום createFactory. זו הדרך הנפוצה ביותר להשתמש ב-React:

export default function App() {
  return (
    <button onClick={() => {
      alert('Clicked!');
    }}>
      Click me
    </button>
  );
};

Pitfall

לפעמים קיים קוד קיים כ-type במצב קבוע כמו 'button':

function Heading({ isSubheading, ...props }) {
  const type = isSubheading ? 'h2' : 'h1';
  const factory = createFactory(type);
  return factory(props);
}

כדי לעשות את זה ב-JSX, צריך לשנות את שם השינוי כדי לשנות באות גדולות, למשל Type:

function Heading({ isSubheading, ...props }) {
  const Type = isSubheading ? 'h2' : 'h1';
  return <Type {...props} />;
}

אחרת React תפרש <type> כתגית HTML מובנית כי היא באותיות קטנות.

PreviouscreateElement
NextcreateRef

How do you like these docs?