การใช้ Props กับ Styled Components ใน React

จากบทเรียนที่ผ่านมา เราได้เรียนรู้ว่าคอมโพเนนต์ ที่ถูกสไตล์โดยใช้ไลบรารี Styled Components สามารถใช้ได้เหมือน React คอมโพเนนต์ทั่วไป ในบทเรียนนี้ เราจะเห็นว่า props ก็จะทำงานในลักษณะเดียวกันที่นี่

สมมติว่าเรามี React คอมโพเนนต์ Block และเราได้สร้างคอมโพเนนต์ที่ถูกสไตล์ โดยใช้ Styled Components ขึ้นภายใน คือ Input และ Container:

const Container = styled.div`
	display: flex;
	flex-direction: column;
	width: 150px;
`;

const Input = styled.input`
	margin: 5px;
	font-size: 18px;
`;

มาจัดวางคอมโพเนนต์ Input สามตัวไว้ใน Container:

function Block() {
	return (
		<Container>
			<Input />
			<Input />
			<Input />
		</Container>
	);
}

การใช้ props ทำให้เราสามารถกำหนด แอตทริบิวต์ต่างๆ ในคอมโพเนนต์ได้ ลองมา กำหนดแอตทริบิวต์ placeholder และ type ให้กับอินพุตตัวที่สอง ด้วยค่า name และ text ตามลำดับ และสำหรับอินพุตตัวที่สาม ให้กำหนดค่า password ให้กับแอตทริบิวต์ type:

function Block() {
	return (
		<Container>
			<Input />
			<Input placeholder="name" type="text" />
			<Input type="password" />
		</Container>
	);
}

สร้าง React คอมโพเนนต์ Block ที่ว่างเปล่า สร้าง div ภายใน ซึ่งจะมี ปุ่มสามปุ่ม โดยใช้ไลบรารี Styled Components ทำการสไตล์ div และปุ่มเหล่านั้น ใช้ props เพื่อทำให้ปุ่มแรกถูกdisabled (ปิดใช้งาน) และ ทำให้ปุ่มที่สามมีประเภทเป็น reset