บทช่วยสอน ตอบสนอง JSX ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ใช้ JSX,การแสดงออกของ JavaScript,สไตล์,หมายเหตุ,แถว,แท็ก HTML เทียบกับการตอบสนองการชุมนุม,
ตอบสนองต่อการเปลี่ยนการใช้งานจาวาสคริ JSX ธรรมดา
JSX ดูเหมือน XML เป็นส่วนขยายของไวยากรณ์ JavaScript
เราไม่จำเป็นต้องใช้ 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 ใน 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> {/*注释th.*/} </div>, document.getElementById('example') );
JSX อนุญาตให้แทรกในอาร์เรย์แม่แบบอาร์เรย์จะขยายโดยอัตโนมัติไปยังสมาชิกทั้งหมด:
var arr = [ <h1>本教程</h1>, <h2>学的不仅是技术,更是梦想!</h2>, ]; ReactDOM.render( <div>{arr}</div>, document.getElementById('example') );
ตอบสนองสามารถทำให้แท็ก HTML (สตริง) หรือตอบสนองส่วนประกอบ (เรียน)
ที่จะทำให้แท็ก HTML เพียงแค่ใช้ชื่อแท็กในตัวพิมพ์เล็กใน JSX
var myDivElement = <div className="foo" />; ReactDOM.render(myDivElement, document.getElementById('example'));
ที่จะทำให้การตอบสนองส่วนประกอบเพียงแค่สร้างจุดเริ่มต้นตัวแปรท้องถิ่นด้วยอักษรตัวใหญ่
var MyComponent = React.createClass({/*th.*/}); var myElement = <MyComponent someProperty={true} />; ReactDOM.render(myElement, document.getElementById('example'));
ตอบสนอง JSX ใช้บนและล่างกรณีการประชุมที่จะแยกแยะส่วนประกอบชั้นเรียนของท้องถิ่นและแท็ก
หมายเหตุ:
เพราะ JSX เป็น JavaScript, จำนวนของตัวระบุเช่น
class
และfor
ไม่แนะนำให้ชื่อแอตทริบิวต์ XML เป็นทางเลือกที่ตอบสนอง DOM ใช้className
และhtmlFor
ทำสถานที่ให้บริการที่สอดคล้องกัน