Deprecated

API ini akan dihapus pada versi mayor React berikutnya. Lihat beberapa alternatifnya.

createFactory memungkinkan Anda membuat fungsi yang menghasilkan elemen-elemen React dengan tipe yang ditentukan

const factory = createFactory(type)

Referensi

createFactory(type)

Panggil createFactory(type) untuk membuat sebuah fungsi pabrik (factory function) yang menghasilkan elemen-elemen React dengan type yang ditentukan.

import { createFactory } from 'react';

const button = createFactory('button');

Lalu Anda dapat menggunakannya untuk membuat elemen-elemen React tanpa JSX :

export default function App() {
  return button({
    onClick: () => {
      alert('Sudah diklik!')
    }
  }, 'Klik saya');
}

Lihat contoh-contoh lainnya di bawah ini.

Parameter

  • type: Argumen type harus merupakan tipe komponen React yang valid. Misalnya, bisa berupa string nama tag (seperti 'div' atau 'span'), atau komponen React (fungsi, kelas, atau komponen khusus seperti Fragment).

Kembalian

Mengembalikan sebuah fungsi pabrik. Fungsi pabrik tersebut menerima objek props sebagai argumen pertama, diikuti oleh daftar argumen ...children, dan mengembalikan elemen React dengan type, props, dan children yang diberikan.

Penggunaan

Membuat elemen-elemen React dengan menggunakan fungsi pabrik

Meskipun sebagian besar proyek React menggunakan JSX untuk mendeskripsikan antarmuka pengguna, JSX tidak diperlukan. Di masa lalu, createFactory digunakan sebagai salah satu cara untuk mendeskripsikan antarmuka pengguna tanpa menggunakan JSX

Panggil createFactory untuk membuat sebuah fungsi pabrik untuk tipe elemen tertentu seperti 'button':

import { createFactory } from 'react';

const button = createFactory('button');

Memanggil fungsi pabrik tersebut akan menghasilkan elemen-elemen React dengan props dan children yang telah Anda berikan:

import { createFactory } from 'react';

const button = createFactory('button');

export default function App() {
  return button({
    onClick: () => {
      alert('Sudah diklik!')
    }
  }, 'Klik saya');
}

Berikut adalah bagaimana createFactory digunakan sebagai alternatif untuk JSX. Namun, createFactory sudah tidak digunakan lagi (deprecated), dan Anda sebaiknya tidak menggunakan createFactory dalam kode baru. Berikut adalah cara melakukan migrasi dari createFactory:

Alternatif

Menyalin createFactory ke dalam proyek Anda

Jika proyek Anda memiliki banyak panggilan createFactory, salin implementasi createFactory.js ini ke dalam proyek Anda:

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

const button = createFactory('button');

export default function App() {
  return button({
    onClick: () => {
      alert('Sudah diklik!')
    }
  }, 'Klik saya');
}

Ini memungkinkan Anda menjaga semua kode Anda tetap tidak berubah kecuali impor-impornya.

Mengganti createFactory dengan createElement

Jika Anda memiliki beberapa panggilan createFactory yang tidak masalah untuk dipindahkan secara manual, dan Anda tidak ingin menggunakan JSX, Anda dapat menggantikan setiap panggilan fungsi pabrik dengan panggilan createElement. Sebagai contoh, Anda dapat menggantikan kode ini:

import { createFactory } from 'react';

const button = createFactory('button');

export default function App() {
  return button({
    onClick: () => {
      alert('Sudah diklik!')
    }
  }, 'Klik saya');
}

dengan kode ini:

import { createElement } from 'react';

export default function App() {
  return createElement('button', {
    onClick: () => {
      alert('Sudah diklik!')
    }
  }, 'Klik saya');
}

Berikut ini adalah contoh lengkap penggunaan React tanpa JSX:

import { createElement } from 'react';

export default function App() {
  return createElement('button', {
    onClick: () => {
      alert('Sudah diklik!')
    }
  }, 'Klik saya');
}

Mengganti createFactory dengan JSX

Akhirnya, Anda dapat menggunakan JSX sebagai pengganti createFactory. Ini adalah cara yang paling umum digunakan dalam penggunaan React:

export default function App() {
  return (
    <button onClick={() => {
      alert('Sudah diklik!');
    }}>
      Klik saya
    </button>
  );
};

Pitfall

Terkadang, kode yang ada mungkin mengirimkan beberapa variabel sebagai type daripada konstan seperti 'button':

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

Untuk melakukan hal yang sama dalam JSX, Anda perlu mengganti nama variabel Anda agar diawali dengan huruf kapital seperti Type:

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

Sebaliknya, React akan menafsirkan <type> sebagai tag HTML bawaan karena ditulis dengan huruf kecil.

PreviouscreateElementNextcreateRef

How do you like these docs?