Deprecated

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

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

const factory = createFactory(type)

Reference

createFactory(type)

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

import { createFactory } from 'react';

const button = createFactory('button');

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

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

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

Parameters

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

Returns

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

שימוש

יצירת React elements עם factory

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

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

import { createFactory } from 'react';

const button = createFactory('button');

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

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?