React Render HTML
เป้าหมายของ React มีหลายวิธีในการแสดง HTML ในหน้าเว็บ
React แสดง HTML ไปยังหน้าเว็บโดยใช้ฟังก์ชันที่เรียกว่า
ReactDOM.render().
ฟังก์ชั่นการแสดงผล
ฟังก์ชันReactDOM.render()รับอาร์กิวเมนต์ 2 ตัว คือโค้ด HTML และองค์ประกอบ HTML
วัตถุประสงค์ของฟังก์ชันคือเพื่อแสดงโค้ด HTML ที่ระบุภายในองค์ประกอบ HTML ที่ระบุ
แต่เรนเดอร์ที่ไหน?
มีอีกโฟลเดอร์หนึ่งในไดเร็กทอรีรูทของโปรเจ็กต์ React ของคุณชื่อ "สาธารณะ" ในโฟลเดอร์นี้มีindex.htmlไฟล์.
คุณจะสังเกตเห็นไฟล์เดียว<div>
ในเนื้อหาของไฟล์นี้ นี่คือที่ที่แอปพลิเคชัน React ของเราจะแสดง
ตัวอย่าง
แสดงย่อหน้าภายในองค์ประกอบที่มี id ของ "root":
ReactDOM.render(<p>Hello</p>, document.getElementById('root'));ผลลัพธ์จะแสดงใน<div id="root">องค์ประกอบ:
<body>
<div id="root"></div>
</body>
โปรดทราบว่ารหัสองค์ประกอบไม่จำเป็นต้องเรียกว่า "รูท" แต่นี่เป็นแบบแผนมาตรฐาน
โค้ด HTML
โค้ด HTML ในบทช่วยสอนนี้ใช้ JSX ซึ่งช่วยให้คุณเขียนแท็ก HTML ภายในโค้ด JavaScript:
ไม่ต้องกังวลหากไวยากรณ์ไม่คุ้นเคย คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับ JSX ในบทต่อไป
ตัวอย่าง
สร้างตัวแปรที่มีโค้ด HTML และแสดงในโหนด "root":
const myelement = (
<table>
<tr>
<th>Name</th>
</tr>
<tr>
<td>John</td>
</tr>
<tr>
<td>Elsa</td>
</tr>
</table>
);
ReactDOM.render(myelement, document.getElementById('root'));
โหนดราก
โหนดรูทเป็นองค์ประกอบ HTML ที่คุณต้องการแสดงผลลัพธ์
มันเหมือนกับคอนเทนเนอร์สำหรับเนื้อหาที่จัดการโดย React
ไม่จำเป็นต้องเป็น<div>องค์ประกอบและไม่จำเป็นต้องมีid='root':
ตัวอย่าง
โหนดรูทสามารถเรียกอะไรก็ได้ที่คุณต้องการ:
<body>
<header id="sandy"></header>
</body>
แสดงผลใน<header id="sandy">องค์ประกอบ:
ReactDOM.render(<p>Hallo</p>, document.getElementById('sandy'));