ตอบสนอง JSX
ตอบสนองต่อการเปลี่ยนการใช้งานจาวาสคริ JSX ธรรมดา
JSX ดูเหมือน XML เป็นส่วนขยายของไวยากรณ์ JavaScript
เราไม่จำเป็นต้องใช้ JSX แต่มันก็มีข้อดีดังต่อไปนี้:
- JSX ดำเนินการได้เร็วขึ้นเนื่องจากมีการเรียบเรียงโค้ด JavaScript หลังจากการเพิ่มประสิทธิภาพ
- มันเป็นประเภทปลอดภัยก็สามารถพบในระหว่างการรวบรวมข้อผิดพลาด
- ใช้ JSX เขียนแม่แบบง่ายและรวดเร็วขึ้น
ใช้ JSX
JSX มีลักษณะคล้ายกับ HTML เราสามารถดูตัวอย่าง:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
เราสามารถซ้อนกันในโค้ดด้านบนแท็ก HTML หลายคุณจำเป็นต้องใช้องค์ประกอบ div รอบมันองค์ประกอบกรณี Pเพิ่มแอตทริบิวต์ที่กำหนดเองข้อมูล myattribute เพิ่มแอตทริบิวต์ที่กำหนดเองต้องใช้คำนำหน้า DATA-
ReactDOM.render(
<div>
<h1>本教程</h1>
<h2>欢迎学习 React</h2>
<p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
</div>
,
document.getElementById('example')
);
ไฟล์อิสระ
รหัส React JSX คุณสามารถวางในเอกสารแยกต่างหากเช่นเราจะสร้าง helloworld_react.js ไฟล์ดังต่อไปนี้:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
จากนั้นนำเข้าสู่ไฟล์ JS ในไฟล์ HTML:
<body> <div id="example"></div> <script type="text/babel" src="helloworld_react.js"></script> </body>
การแสดงออกของ JavaScript
เราสามารถใช้นิพจน์ JavaScript ใน JSX เขียนการแสดงออกในวงเล็บปีกกา{}ตัวอย่างมีดังนี้
ReactDOM.render(
<div>
<h1>{1+1}</h1>
</div>
,
document.getElementById('example')
);
คุณไม่สามารถใช้ถ้างบอื่นใน JSX เดียวสามารถใช้เงื่อนไข (ประกอบ ternary)การแสดงออกแทนตัวอย่างต่อไปนี้ถ้าตัวแปรที่ฉันจะมีค่าเท่ากับ 1ส่งออกจะเบราว์เซอร์ที่แท้จริงถ้าคุณปรับเปลี่ยนค่าของฉันก็จะได้ผลลัพธ์ที่เป็นเท็จ
ReactDOM.render(
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div>
,
document.getElementById('example')
);
สไตล์
React แนะนำให้ใช้รูปแบบอินไลน์ เราสามารถใช้ไวยากรณ์CamelCase การตั้งค่ารูปแบบอินไลน์. React เพิ่มพิกเซลโดยอัตโนมัติหลังจากที่จำนวนองค์ประกอบที่ระบุตัวอย่างต่อไปนี้แสดงให้เห็นถึงการเพิ่มรูปแบบอินไลน์MyStyle สำหรับองค์ประกอบ H1:
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>本教程</h1>,
document.getElementById('example')
);
หมายเหตุ
หมายเหตุ: ต้องเขียนในวงเล็บตัวอย่างดังต่อไปนี้:
ReactDOM.render(
<div>
<h1>本教程</h1>
{/*注释...*/}
</div>,
document.getElementById('example')
);
แถว
JSX อนุญาตให้แทรกในอาร์เรย์แม่แบบอาร์เรย์จะขยายโดยอัตโนมัติไปยังสมาชิกทั้งหมด:
var arr = [
<h1>本教程</h1>,
<h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
แท็ก HTML เทียบกับการตอบสนองการชุมนุม
ตอบสนองสามารถทำให้แท็ก HTML (สตริง) หรือตอบสนองส่วนประกอบ (เรียน)
ที่จะทำให้แท็ก HTML เพียงแค่ใช้ชื่อแท็กในตัวพิมพ์เล็กใน JSX
var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));
ที่จะทำให้การตอบสนองส่วนประกอบเพียงแค่สร้างจุดเริ่มต้นตัวแปรท้องถิ่นด้วยอักษรตัวใหญ่
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));
ตอบสนอง JSX ใช้บนและล่างกรณีการประชุมที่จะแยกแยะส่วนประกอบชั้นเรียนของท้องถิ่นและแท็ก
หมายเหตุ:
เพราะ JSX เป็น JavaScript, จำนวนของตัวระบุเช่น
classและforไม่แนะนำให้ชื่อแอตทริบิวต์ XML เป็นทางเลือกที่ตอบสนอง DOM ใช้classNameและhtmlForทำสถานที่ให้บริการที่สอดคล้องกัน