createElement
createElement
memungkinkan Anda membuat elemen React. Ini berfungsi sebagai alternatif untuk menulis JSX.
const element = createElement(type, props, ...children)
Referensi
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
: Argumenttype
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 sepertiFragment
). -
props
: Argumenprops
harus berupa objek ataunull
. Jika Anda mengopernull
, itu akan diperlakukan sama seperti objek kosong. React akan membuat elemen dengan props yang cocok denganprops
yang telah Anda oper. Perhatikan bahwaref
dankey
dari objekprops
Anda adalah spesial dan tidak akan tersedia sebagaielement.props.ref
danelement.props.key
padaelement
yang dikembalikan. Mereka akan tersedia sebagaielement.ref
danelement.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
, danfalse
), 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 untukref
dankey
. Jikatype
adalah komponen legacytype.defaultProps
, lalu ada yang hilang atau tidak terdefinisiprops
akan mendapatkan nilai daritype.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 dengancreateElement(Something)
, tetapi<something />
(huruf kecil) setara dengancreateElement('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, seperticreateElement('h1', {}, child1, child2, child3)
. Jika anak Anda dinamis, oper seluruh array sebagai argumen ketiga:createElement('ul', {}, listItems)
. Ini memastikan bahwa React akan memperingatkan Anda tentangkey
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 (children) bersifat opsional, 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
:
import { createElement } from 'react'; function Greeting({ name }) { return createElement( 'h1', { className: 'greeting' }, 'Hello ', createElement('i', null, name), '. Welcome!' ); } export default function App() { return createElement( Greeting, { name: 'Taylor' } ); }
Dan berikut adalah contoh yang sama yang ditulis menggunakan JSX:
function Greeting({ name }) { return ( <h1 className="greeting"> Hello <i>{name}</i>. Welcome! </h1> ); } export default function App() { return <Greeting name="Taylor" />; }
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.
Pendalaman
Elemen adalah deskripsi ringan dari bagian antarmuka pengguna. Misalnya, keduanya <Greeting name="Taylor" />
dan createElement(Greeting, { name: 'Taylor' })
menghasilkan objek seperti ini:
// Slightly simplified
{
type: Greeting,
props: {
name: 'Taylor'
},
key: null,
ref: null,
}
Perhatikan bahwa membuat objek ini tidak me-render komponen Greeting
atau membuat elemen DOM apa pun.
Elemen React lebih seperti deskripsi—instruksi untuk React untuk me-render komponen Greeting
nanti. Dengan mengembalikan objek ini dari komponen App
Anda, Anda memberi tahu React apa yang harus dilakukan selanjutnya.
Membuat elemen sangatlah murah sehingga Anda tidak perlu mencoba mengoptimalkan atau menghindarinya.