Cảnh báo: Lớp thuộc tính DOM không xác định. Ý bạn là className?

Tôi vừa mới bắt đầu khám phá React, bằng cách thêm một thành phần có chức năng kết xuất đơn giản:

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

Khi tôi chạy ứng dụng, tôi gặp lỗi sau:

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

Tôi có thể giải quyết vấn đề này bằng cách thay đổi classthành className.

Câu hỏi là; React có thực thi quy ước này không? Ngoài ra, tại sao tôi cần sử dụng classNamethay vì thông thường class? Nếu đây là một hạn chế thì đó là do cú pháp JSX hay một nơi nào khác?

Vâng, đó là một quy ước React:

Vì JSX là JavaScript, các mã định danh như classvà forkhông được khuyến khích làm tên thuộc tính XML. Thay vào đó, các thành phần React DOM yêu cầu các tên thuộc tính DOM tương ứng như classNamevà htmlFor, tương ứng.

JSX chuyên sâu .

Meteor sử dụng babel để chuyển từ ES5 sang ES6 (ES2015), vì vậy chúng ta có thể xử lý nó như một ứng dụng Node bình thường có thêm bộ chuyển vị babel.

Bạn cần thêm .babelrctệp vào thư mục gốc của dự án và thêm các mục sau

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

Và tất nhiên, bạn cần cài đặt plugin này bằng cách sử dụng npm:

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

Trong React.js không có thuộc tính for và class nên chúng ta cần sử dụng

for   --> htmlFor
class --> className

Bạn không thể sử dụng lớp cho bất kỳ thuộc tính thẻ HTML nào vì JS có một ý nghĩa khác của lớp. Đó là lý do tại sao bạn phải sử dụng className thay vì class.

Và cũng sử dụng thuộc tính htmlFor thay vì for.

Trong HTML, chúng tôi sử dụng

class="navbar"

nhưng trong React và ReactNative không có HTML, chúng tôi sử dụng JSX (Javascript XML) ở đây chúng tôi sử dụng

className="navbar"

Cú pháp JSX khi được biên dịch bằng cách sử dụng babel, cú pháp cơ bản mà nó sẽ sử dụng để tạo phần tử HTML sẽ là

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

Nếu chúng ta sử dụng lớp thay vì className, phản ứng sẽ suy ra nó là lớp javascript thay vì thuộc tính lớp html. [Lý do tên biến 'class' đã được sử dụng trong tệp để tạo một lớp javascript và được dành riêng cho mục đích tương tự]. Điều này là sai và trình biên dịch sẽ ném ra lỗi, vì lớp javascript không phải là thuộc tính hợp lệ cho các phần tử html DOM.

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

Do đó, cần phải sử dụng className thay vì class.

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