Peringatan: Kelas properti DOM tidak diketahui. Apakah yang Anda maksud className?

Saya baru saja mulai menjelajahi React, dengan menambahkan komponen dengan fungsi render sederhana:

render() {
  return <div class="myApp"></div>
}

Ketika saya menjalankan aplikasi, saya mendapatkan kesalahan berikut:

Warning: Unknown DOM property class. Did you mean className?

Saya bisa mengatasi ini dengan mengubah classke className.

Pertanyaannya adalah; apakah React memberlakukan konvensi ini? Juga mengapa saya harus menggunakan classNameyang konvensional class? Jika ini adalah batasan, apakah itu karena sintaks JSX atau di tempat lain?

Ya, ini adalah konvensi React:

Karena JSX adalah JavaScript, pengidentifikasi seperti classdan fortidak disarankan sebagai nama atribut XML. Sebagai gantinya, komponen React DOM mengharapkan nama properti DOM seperti classNamedan htmlFor, masing-masing.

JSX In Depth .

Meteor menggunakan babel untuk mentranspilasi ES5 ke ES6 (ES2015), jadi kita dapat menanganinya sebagai aplikasi Node biasa dengan menambahkan babel transpiler.

Anda perlu menambahkan .babelrcfile ke folder root proyek Anda, dan menambahkan item berikut

{
  "plugins": [
    "react-html-attrs"
  ]
}

Dan tentu saja, Anda perlu menginstal plugin ini menggunakan npm:

npm install --save-dev babel-plugin-react-html-attrs

Di React.js tidak ada properti untuk dan kelas yang tersedia sehingga kita perlu menggunakannya

for   --> htmlFor
class --> className

Anda tidak dapat menggunakan kelas untuk atribut tag HTML apa pun karena JS memiliki arti kelas yang lain. Itulah mengapa Anda harus menggunakan className, bukan class.

Dan juga gunakan atribut htmlFor, bukan untuk.

Dalam HTML kami menggunakan

class="navbar"

tapi di React dan ReactNative tidak ada HTML, kami menggunakan JSX (Javascript XML) disini kami gunakan

className="navbar"

Sintaks JSX ketika dikompilasi menggunakan babel, sintaks yang mendasari yang akan digunakan untuk membuat elemen HTML nantinya

   React.createElement('div', {attributes}, "Hello");

Jika kita menggunakan kelas sebagai ganti className, react akan menyimpulkannya sebagai kelas javascript, bukan atribut kelas html. [Alasan nama variabel 'kelas' sudah digunakan dalam file untuk membuat kelas javascript dan dicadangkan untuk tujuan yang sama]. Mana yang salah dan kompilator akan membuang kesalahan tersebut, karena kelas javascript bukanlah properti yang valid untuk elemen DOM html.

   React.createElement("p", {"class": "header"}, "Hello");

Oleh karena itu perlu menggunakan className sebagai pengganti class.

   React.createElement("p", {"className": "header"}, "Hello")