ReactJS ชื่อองค์ประกอบจะต้องเริ่มต้นด้วยตัวอักษรพิมพ์ใหญ่?

ฉันกำลังเล่นรอบกับกรอบ ReactJS บนJSBin

ฉันสังเกตว่าถ้าชื่อองค์ประกอบของฉันเริ่มต้นด้วยตัวอักษรตัวเล็กมันไม่ทำงาน

ตัวอย่างเช่นสิ่งต่อไปนี้ไม่แสดงผล:

var fml = React.createClass({
  render: function () {
    return <a href='google.com'>Go</a>
  }
});

React.render(<fml />, document.body);

แต่ทันทีที่ฉันแทนที่fmlด้วยFmlมันจะทำให้

มีเหตุผลที่ฉันไม่สามารถเริ่มแท็กด้วยตัวอักษรขนาดเล็กได้หรือไม่?

ใน JSX ชื่อแท็กตัวพิมพ์เล็กจะถือเป็นแท็ก HTML อย่างไรก็ตามชื่อแท็กตัวพิมพ์เล็กที่มีจุด (ตัวเข้าถึงคุณสมบัติ) ไม่ใช่

ดูแท็ก VS React ส่วนประกอบ

• <component />คอมไพล์ถึงReact.createElement('component')(แท็ก html)
• <Component /> รวบรวมเพื่อ React.createElement(Component)
• <obj.component /> รวบรวมเพื่อ React.createElement(obj.component)

@Alexandre Kirszenbergให้คำตอบที่ดีมากเพียงแค่ต้องการเพิ่มรายละเอียดอีกครั้ง

React ใช้เพื่อบรรจุรายชื่อที่อนุญาตของชื่อองค์ประกอบที่รู้จักกันดีเช่นdivฯลฯ ซึ่งใช้เพื่อแยกความแตกต่างระหว่างองค์ประกอบ DOM และส่วนประกอบ React

แต่เนื่องจากรักษารายการที่ไม่ได้ทั้งหมดที่สนุกและเพราะส่วนประกอบเว็บทำให้มันเป็นไปได้ที่จะสร้างองค์ประกอบที่กำหนดเองพวกเขาทำให้มันกฎว่าทุก React ส่วนประกอบจะต้องเริ่มต้นด้วยตัวอักษรตัวพิมพ์ใหญ่หรือมีจุด

จากการอ้างอิง React อย่างเป็นทางการ :

เมื่อประเภทองค์ประกอบเริ่มต้นด้วยตัวอักษรตัวเล็กมันหมายถึงองค์ประกอบในตัวเช่นหรือและส่งผลให้สตริง 'div' หรือ 'ช่วง' ผ่านไปยัง React.createElement ประเภทที่ขึ้นต้นด้วยตัวพิมพ์ใหญ่เช่นคอมไพล์ถึง React.createElement (Foo) และสอดคล้องกับส่วนประกอบที่กำหนดหรือนำเข้าในไฟล์ JavaScript ของคุณ

โปรดทราบว่า:

เราขอแนะนำส่วนประกอบการตั้งชื่อด้วยอักษรตัวใหญ่ หากคุณมีส่วนประกอบที่ขึ้นต้นด้วยตัวอักษรตัวเล็กให้กำหนดให้กับตัวแปรตัวพิมพ์ใหญ่ก่อนที่จะใช้ใน JSX

ซึ่งหมายความว่าเราต้องใช้:

const Foo = foo;ก่อนใช้fooเป็นองค์ประกอบองค์ประกอบใน JSX

ส่วนแรกของJSXแท็กกำหนดประเภทขององค์ประกอบที่ตอบสนองโดยทั่วไปมีการประชุมบางตัวพิมพ์ใหญ่พิมพ์เล็ก dot-สัญกรณ์

ชนิดตัวพิมพ์ใหญ่และเครื่องหมายดอทบ่งบอกว่าJSXแท็กนั้นอ้างถึงส่วนประกอบ React ดังนั้นหากคุณใช้ JSX <Foo />คอมไพล์กับReact.createElement(Foo)
OR
<foo.bar />คอมไพล์หรือและคอมไพล์กับReact.createElement(foo.bar)คอมโพเนนต์ที่กำหนดหรืออิมพอร์ตในไฟล์ JavaScript ของคุณ

ในขณะที่ประเภทตัวพิมพ์เล็กบอกในตัวเช่นองค์ประกอบ<div>หรือ<span>และผลในสตริง'div'หรือส่งผ่านไปยัง'span'React.createElement('div')

ทำซ้ำแนะนำองค์ประกอบการตั้งชื่อด้วยอักษรตัวใหญ่ JSXหากคุณมีองค์ประกอบที่เริ่มต้นด้วยตัวอักษรตัวพิมพ์เล็กให้กำหนดค่าให้กับตัวแปรทุนก่อนที่จะใช้ใน

ใน JSX คลาส React จะเป็นตัวพิมพ์ใหญ่เพื่อให้เข้ากันได้กับ XML ดังนั้นจึงไม่ผิดสำหรับแท็ก HTML หากคลาสการตอบสนองไม่ได้เป็นตัวพิมพ์ใหญ่จะเป็นแท็ก HTML เป็นไวยากรณ์ JSX ที่กำหนดไว้ล่วงหน้า