คำเตือน: คลาสคุณสมบัติ DOM ที่ไม่รู้จัก คุณหมายถึง className หรือเปล่า

ฉันเพิ่งเริ่มสำรวจ React โดยการเพิ่มส่วนประกอบที่มีฟังก์ชันการแสดงผลอย่างง่าย:

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

เมื่อฉันเรียกใช้แอพฉันได้รับข้อผิดพลาดต่อไปนี้:

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

ฉันสามารถแก้ปัญหานี้โดยการเปลี่ยนไปclassclassName

คำถามคือ; React บังคับใช้อนุสัญญานี้หรือไม่ นอกจากนี้ทำไมฉันต้องใช้classNameแทนของเดิมclass? หากนี่เป็นข้อ จำกัด นั่นเป็นเพราะไวยากรณ์ JSX หรือที่อื่น?

ใช่มันเป็นรูปแบบการตอบสนอง:

เนื่องจาก JSX เป็น JavaScript ตัวระบุเช่นclassและforไม่แนะนำให้ใช้เป็นชื่อแอตทริบิวต์ XML คอมโพเนนต์ของ React DOM จะคาดหวังชื่อคุณสมบัติ DOM เหมือนclassNameและhtmlForตามลำดับ

JSX ในความลึก

Meteor ใช้ babel เพื่อถ่ายทอด ES5 ไปยัง ES6 (ES2015) ดังนั้นเราจึงสามารถจัดการกับมันได้เหมือนแอปพลิเคชัน Node ปกติที่มีการเพิ่ม babel Transpiler

คุณต้องเพิ่ม.babelrcไฟล์ลงในโฟลเดอร์รูทของโปรเจ็กต์และเพิ่มรายการต่อไปนี้

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

และแน่นอนคุณต้องติดตั้งปลั๊กอินนี้โดยใช้npm:

การติดตั้ง npm - บันทึก - dev babel-plugin-react-html-attrs

ใน React.js ไม่มีคุณสมบัติสำหรับและคลาสดังนั้นเราจึงต้องใช้

for   --> htmlFor
class --> className

คุณไม่สามารถใช้คลาสสำหรับแอตทริบิวต์แท็ก HTML ใด ๆ เนื่องจาก JS มีความหมายอื่นของคลาส นั่นเป็นเหตุผลที่คุณต้องใช้ className แทน class

และยังใช้แอตทริบิวต์ htmlFor แทนสำหรับ.

ใน HTML เราใช้

class="navbar"

แต่ใน React และ ReactNative ไม่มี HTML เราใช้ JSX (Javascript XML) ที่นี่เราใช้

className="navbar"

ไวยากรณ์ JSX เมื่อคอมไพล์โดยใช้ babel ไวยากรณ์พื้นฐานที่จะใช้สร้างองค์ประกอบ HTML จะเป็น

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

ถ้าเราใช้คลาสแทน className ปฏิกิริยาจะอนุมานว่าเป็นคลาสจาวาสคริปต์แทนแอตทริบิวต์คลาส html [เหตุผลที่ชื่อตัวแปร "class" ถูกใช้แล้วในไฟล์เพื่อสร้างคลาสจาวาสคริปต์และสงวนไว้เพื่อวัตถุประสงค์เดียวกัน] ข้อใดผิดพลาดและคอมไพเลอร์แสดงข้อผิดพลาดเนื่องจากคลาส javascript ไม่ใช่คุณสมบัติที่ถูกต้องสำหรับองค์ประกอบ html DOM

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

ดังนั้นจึงจำเป็นต้องใช้ className แทน class

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