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

114

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?

javascript reactjs react-jsx

— jsalonen.dll
sumber

151

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 .

— Viacheslav
sumber

9

Saya menemukan ini sangat tidak intuitif. Saya pikir parser harus tahu cara mengganti konteks antara dua bahasa berdasarkan konteks, menjauhkan beban programmer dan alat

— Jonathan

13

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

— securecurve
sumber

Terima kasih, saya dapat memperbaiki "DOM Tidak Valid" setelah menginstal react-facebook-login.

— Kakashi

12

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

for   --> htmlFor
class --> className

— KARTHIKEYAN.A
sumber

4

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.

— Nimmi Verma
sumber

3

Dalam HTML kami menggunakan

class="navbar"

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

className="navbar"

— Muhammad Talha
sumber

0

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")

— Sasi Kumar M
sumber