React : การสร้าง Element โดย React.createElement

วันนี้ผมจะมาแนะนำอีกหนึ่งคำสั่งใน react เพื่อหากได้มีโอกาศใช้งาน คำสั่งนี้คือ React.createElement เอาไว้เพื่อทำการสร้าง element แบบ dynamic ตามคำสั่งโค้ดที่เราเขียน

โดยรูปแบบการใช้งานคำสั่งนี้คือ

React.createElement('element ที่ต้องการสร้าง', 'รูปแบบ style, class css', 'เนื้อหา ที่ต้องการแสดง', ... เนื่อหาอื่นๆ)

ที่นี้มาดูตัวอย่างโค้ดกันนะครับ โดยผมใช้โค้ดจากตัวอย่างในบทความก่อนหน้านี้ React การใช้ CSS จากนั้นก็ลบโค้ดในส่วน script ออกเพื่อที่ผมจะได้ใช้ bootstrap ที่ include เข้ามาจาก cdn นั้นเองโดยมีโค้ดดังนี้ครับ

<!DOCTYPE html>
<html>
<head>
	<title>Hello World</title>
	<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
	<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
	<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
	<div id="content"></div>
	<script type="text/babel">
		let content = React.createElement('p',{style:{color:"red"}},'Paragraph content')
		let titleHeader = React.createElement('h3', {className:'text-success'},'React Titile')
		let divContent = React.createElement('div',{className:'border m-3 p-3'} ,titleHeader, content)
		ReactDOM.render(divContent, document.querySelector('#content'))
	</script>

	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
		integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
		crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
		integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
		crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
		integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
		crossorigin="anonymous"></script>
</body>
</html>

จากโค้ดผมทำการสร้างตัวแปรแรก ขึ้นมาชื่อว่า content ให้เก็บค่าจาก element ที่สร้างขึ้น เป็น element p ที่มีกำหนด style ให้ สีเป็นสีแดง และมีข้อความ ‘Paragraph content’ ในส่วน parameter style นั้นถ้าเราไม่ต้องการกำหนด style ให้ใส่ ” หรือ {} ว่างๆไว้ครับ เช่น

let content = React.createElement('p', '', 'Content Paragraph')

หลังจากที่สร้างตัวแปร content ขึ้นมาแล้วเราจะทำการ render ผ่าน ReactDOM.render เหมือนเดิม แต่ในตัวอย่างนี้ผมของสร้างตัวแปรขึ้นมาอีกสองตัวคือ titleHeader เป็น element แบบ h3 ซึ่งสังเกตว่า style ที่กำหนดให้นั้นจะเป็น class ของ bootstrap แต่คำว่า class จะใช้คำว่า className เหมือนเดิมครับ

ต่อมาตัวแปรสุดท้ายคือ divContent จะเป็น element แบบ div แต่ให้สังเกตตรงเนื้อหาของ element นั้นเราจะใช้ element ที่สร้างขึ้นก่อนหน้านี้ 2 อันที่เก็บในตัวแปรคือ titleHeader, content โดยผมใส่ลำดับ titleHeader ก่อนแล้วตามตัว content
จากนั้นก็ทำการ render ให้กับ tag div ที่มี id = “content” ตามโค้ดตัวอย่าง

เมื่อลองเปิดไฟล์ก็จะได้ผลลัพธ์ตามรูป

จะเห็นมาการใช้ React.createElement นั้นทำให้เราสามารถสร้าง element แบบ dynamic ตามคำสั่งโค้ดและเงื่อนไขที่เราต้องการได้ และยังสามารถผ่านค่าตัวแปรเข้าไปเป็น เนื้อหาของ element อีกด้วย นอกจากนี้เนื้อที่ใส่ให้กับ element ที่เราสร้างยังรองรับมากกว่า 1 ค่า และเรียงลำดับการผ่านค่าเข้าไปเหมือนในโค้ดตัวอย่างที่เรียงเอา titleHeader ขึ้นก่อนตามด้วย content ก็เป็นอันว่าขอจบบทความในตอนนี้แค่นี้นะครับ

React การใช้ CSS

Component ใน React.js เบื้องต้น

ขอขอบคุณ

reactjs.org/

Leave a Reply

Your email address will not be published. Required fields are marked *