createElement

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

• Reference
  • createElement(type, props, ...children)
• Penggunaan
  • Membuat elemen tanpa JSX

Reference

createElement(type, props, ...children)

Panggil createElement untuk membuat elemen React dengan parameter type, props, dan children.

import { createElement } from 'react';

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

Lihat lebih banyak contoh lainnya di bawah ini.

Parameter

• type: Argument type harus berupa 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).

• props: Argumen props harus berupa objek atau null. Jika Anda mengoper null, itu akan diperlakukan sama seperti objek kosong. React akan membuat elemen dengan props yang cocok dengan props yang telah Anda oper. Perhatikan bahwa ref dan key dari objek props Anda adalah spesial dan tidak akan tersedia sebagai element.props.ref dan element.props.key pada element yang dikembalikan. Mereka akan tersedia sebagai element.ref dan element.key.

• optional ...children: Nol atau lebih simpul anak. Mereka bisa berupa simpul React apa saja, termasuk elemen React, string, angka, portal, simpul kosong (null, undefined, true, dan false), dan array simpul React.

Kembalian

createElement mengembalikan objek elemen React dengan beberapa properti:

• type: type yang telah Anda oper.
• props: props yang telah Anda oper kecuali untuk ref dan key. Jika type adalah komponen legacy type.defaultProps, lalu ada yang hilang atau tidak terdefinisi props akan mendapatkan nilai dari type.defaultProps.
• ref: ref yang telah Anda oper. Jika hilang, null.
• key: key yang telah Anda oper, dipaksa untuk string. Jika hilang, null.

Biasanya, Anda akan mengembalikan elemen dari komponen Anda atau menjadikannya anak dari elemen lain. Meskipun Anda dapat membaca properti elemen, yang terbaik adalah memperlakukan setiap elemen sebagai buram setelah dibuat, dan hanya me-render-nya.

Catatan penting

• Anda harus memperlakukan elemen React dan propertinya sebagai Immutable dan tidak pernah mengubah isinya setelah dibuat. Dalam pengembangan, React akan membekukan elemen yang dikembalikan dan props properti dangkal untuk menegakkan ini.

• Saat Anda menggunakan JSX, Anda harus memulai tag dengan huruf kapital untuk me-render komponen kustom Anda sendiri. Dengan kata lain, <Something /> setara dengan createElement(Something), tetapi <something /> (huruf kecil) setara dengan createElement('something') (perhatikan itu adalah string, sehingga akan diperlakukan sebagai tag HTML bawaan).

• Anda hanya boleh mengoper anak sebagai beberapa argumen untuk createElement jika semuanya diketahui secara statis, seperti createElement('h1', {}, child1, child2, child3). Jika anak Anda dinamis, oper seluruh array sebagai argumen ketiga: createElement('ul', {}, listItems). Ini memastikan bahwa React akan memperingatkan Anda tentang key yang hilang untuk setiap daftar dinamis. Untuk daftar statis ini tidak diperlukan karena mereka tidak pernah menyusun ulang.

Penggunaan

Membuat elemen tanpa JSX

Jika Anda tidak menyukai JSX atau tidak dapat menggunakannya dalam proyek Anda, Anda dapat menggunakan createElement sebagai alternatif.

Untuk membuat elemen tanpa JSX, panggil createElement dengan beberapa type, props, dan children:

import { createElement } from 'react';

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

Anak bersifat optional, dan Anda dapat mengoper sebanyak yang Anda butuhkan (contoh di atas memiliki tiga anak). Kode ini akan menampilkan header <h1> dengan salam. Sebagai perbandingan, berikut adalah contoh yang sama yang ditulis ulang dengan JSX:

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

Untuk me-render komponen React Anda sendiri, oper fungsi seperti Greeting sebagai type bukan string seperti 'h1':

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

Dengan JSX, akan terlihat seperti ini:

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

Berikut adalah contoh lengkap yang ditulis dengan createElement:

Dan berikut adalah contoh yang sama yang ditulis menggunakan JSX:

Kedua gaya pengkodean baik-baik saja, sehingga Anda dapat menggunakan mana yang Anda sukai untuk proyek Anda. Manfaat utama menggunakan JSX dibandingkan dengan createElement adalah mudah untuk melihat tag penutup mana yang sesuai dengan tag pembuka mana.

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