ใน React (เฟรมเวิร์กของ Facebook) ฉันต้องแสดงองค์ประกอบป้ายกำกับที่ผูกไว้กับการป้อนข้อความโดยใช้forแอตทริบิวต์มาตรฐาน
เช่นใช้ JSX ต่อไปนี้:
<label for="test">Test</label>
<input type="text" id="test" />อย่างไรก็ตามสิ่งนี้ทำให้ HTML ขาดforแอตทริบิวต์(และมาตรฐาน) ที่ต้องการ
<label>Test</label>
<input type="text" id="test">ผมทำอะไรผิดหรือเปล่า?
คำตอบ:
forแอตทริบิวต์ที่เรียกว่าhtmlForสำหรับความสอดคล้องกับ API คุณสมบัติ DOM หากคุณกำลังใช้โครงสร้างการพัฒนาของ React คุณควรเห็นคำเตือนในคอนโซลของคุณเกี่ยวกับสิ่งนี้
labelองค์ประกอบ (กลับมาเป็นตามdocument.createElement, document.getElementByIdฯลฯ ) ที่คุณต้องการเข้าถึงของทรัพย์สินfor label.htmlFor
ใช่สำหรับปฏิกิริยา
for กลายเป็น htmlFor
class กลายเป็น className
เป็นต้น
ดูรายการทั้งหมดของการเปลี่ยนแอตทริบิวต์ HTML ที่นี่:
สำหรับการตอบสนองคุณต้องใช้คำหลักต่อการกำหนดเพื่อกำหนดคุณลักษณะ html
class->className
ถูกใช้และ
for->htmlFor
มีการใช้เนื่องจากปฏิกิริยาจะคำนึงถึงขนาดตัวพิมพ์เล็กและตัวใหญ่ต้องแน่ใจว่าคุณต้องติดตามตัวเล็กและตัวใหญ่ตามที่ต้องการ
ทั้งสองforและclassเป็นคำที่สงวนไว้ในจาวาสคริปต์นี่คือเหตุผลว่าทำไมเมื่อมาถึงคุณลักษณะ HTML ใน JSX คุณต้องใช้อย่างอื่นทีมตอบโต้จึงตัดสินใจใช้htmlForและclassNameตามลำดับ
forเป็นคำที่สงวนไว้ใน JavaScript จึงใช้องค์ประกอบการตอบสนองhtmlForแทน": reactjs.org/docs/dom-elements.html#htmlfor
htmlForเพื่อแทนที่for!คุณสามารถค้นหาข้อมูลเพิ่มเติมได้จากลิงค์ด้านล่าง
https://facebook.github.io/react/docs/dom-elements.html#htmlfor
นั่นคือ htmlFor ใน JSX และคลาสคือ className ใน JSX