Nama komponen ReactJS harus dimulai dengan huruf kapital?

148

Saya bermain-main dengan kerangka kerja ReactJS di JSBin .

Saya perhatikan bahwa jika nama komponen saya dimulai dengan huruf kecil tidak berfungsi.

Misalnya yang berikut ini tidak menyajikan:

var fml = React.createClass({
  render: function () {
    return <a href='google.com'>Go</a>
  }
});

React.render(<fml />, document.body);

Tapi begitu saya ganti fmldengan Fmlitu tidak membuat.

Apakah ada alasan saya tidak dapat memulai tag dengan huruf kecil?

javascript reactjs shaunakde
sumber
periksa jawaban pertanyaan ini untuk beberapa detial lagi: Html tidak merender di browser - Bereaksi js
Mayank Shukla

Jawaban:

199

Di JSX, nama tag huruf kecil dianggap sebagai tag HTML. Namun, nama tag huruf kecil dengan titik (pengakses properti) tidak.

Lihat tag HTML vs Komponen Bereaksi .

  • <component />kompilasi ke React.createElement('component')(tag html)
  • <Component /> kompilasi ke React.createElement(Component)
  • <obj.component /> kompilasi ke React.createElement(obj.component)
Alexandre Kirszenberg
sumber
11
Tambahkan setengah jam lagi ke konter. Saya menjadi gila, mencoba membuat sesuatu seperti let component = components[compType]; <component/>, dan mendapatkan kesalahan yang tidak masuk akal.
Zequez
2
Saya sudah mencoba <components[name] />yang tidak berhasil juga.
李 岡 諭
8
Saya tidak percaya bahwa saya tidak melihat ada aturan seperti itu sebelumnya.
shaosh
7
Ini ide yang buruk. Saya bersikap sopan di sini.
Rolf
Yap ini bisa sangat tidak menyenangkan untuk n00bs karena, jika memanggil Componentsalih-alih components, situs mereka yang indah akan dimuat tanpa kesalahan tetapi tidak ada konten!
olisteadman
45

@Alexandre Kirszenberg memberikan jawaban yang sangat bagus, hanya ingin menambahkan detail lain.

Bereaksi dulu mengandung daftar putih nama-nama elemen terkenal seperti divdll, yang digunakan untuk membedakan antara elemen DOM dan komponen Bereaksi.

Tetapi karena mempertahankan daftar itu tidak terlalu menyenangkan, dan karena komponen web memungkinkan untuk membuat elemen khusus, mereka membuatnya aturan bahwa semua komponen Bereaksi harus dimulai dengan huruf besar, atau mengandung titik .

Anders Ekdahl
sumber
3
info hebat, bahkan lebih baik jika ada referensi dokumen resmi. Terima kasih.
WaiKit Kung
kapan ini berubah?
nolawi
11

Dari referensi Bereaksi resmi :

Ketika tipe elemen dimulai dengan huruf kecil, itu merujuk ke komponen bawaan seperti atau dan menghasilkan string 'div' atau 'span' yang diteruskan ke React.createElement. Jenis yang dimulai dengan huruf kapital seperti kompilasi untuk React.createElement (Foo) dan sesuai dengan komponen yang didefinisikan atau diimpor dalam file JavaScript Anda.

Perhatikan juga bahwa:

Kami merekomendasikan komponen penamaan dengan huruf kapital. Jika Anda memiliki komponen yang dimulai dengan huruf kecil, tetapkan ke variabel dengan huruf besar sebelum menggunakannya di JSX.

Yang berarti kita harus menggunakan:

const Foo = foo;sebelum digunakan foosebagai elemen Komponen di BEJ.

0leg
sumber
3

Bagian pertama dari JSXtag menentukan jenis elemen Bereaksi, pada dasarnya ada beberapa huruf besar, huruf kecil, notasi titik .

Tipe huruf kapital dan notasi titik menunjukkan bahwa JSXtag merujuk ke komponen Bereaksi, jadi jika Anda menggunakan <Foo />kompilasi JSX ke React.createElement(Foo)
ATAU
<foo.bar />kompilasi ke React.createElement(foo.bar)dan sesuai dengan komponen yang ditentukan atau diimpor dalam file JavaScript Anda.

Sementara tipe huruf kecil menunjukkan komponen bawaan seperti <div>atau <span>dan menghasilkan string 'div'atau 'span'diteruskan ke React.createElement('div').

Bereaksi merekomendasikan penamaan komponen dengan huruf besar. Jika Anda memiliki komponen yang dimulai dengan huruf kecil, tetapkan ke variabel dengan huruf besar sebelum menggunakannya JSX.

Umair Ahmed
sumber
2

Di JSX, React Classes dikapitalisasi untuk membuat XML kompatibel, sehingga tidak keliru untuk tag HTML. Jika kelas reaksi tidak dikapitalisasi, ini adalah tag HTML sebagai sintaks JSX yang telah ditentukan.

PKA
sumber