Component เดิม เพิ่มเติมคือ tag ต่าง แล้วจะจัดการอย่างไรดี ?

เมื่อการเขียน react component ทำให้เรา reuse component ได้อย่างไม่รู้จบ ความท้าทายต่อมาก็คือ การปรับแต่งโครงสร้างของ component นั้นๆ ให้รองรับการใช้งานอย่างยืดหยุ่น และหนึ่งประเด็นที่น่าสนใจนั่นก็คือ การเปลี่ยน tag html ให้กับ component ที่มี design เหมือนกัน

ทำอย่างไรให้มันสามารถมี tag ตามที่ควรจะเป็น..

Q: ทำไมถึงต้องใช้ tag ต่างกัน ทำไมไม่ใช้ tag กลางๆ อย่าง <div> หรือ <span> ไปเลยหละ ?

A: เราใส่ tag ที่เหมาะสมกับเนื้อหา เพื่อให้ Search Engine เข้าใจเนื้อหาในเว็บไซต์ของเรามากขึ้น ตามหลักมาตรฐานของ html5 นั่นเองค่ะ

( สามารถดูการใช้ tag html ที่เหมาะสม ได้ที่ https://www.designil.com/which-html5-tag-to-use.html )

วิธีการ duplicate component ซ้ำแล้วเปลี่ยน tag อาจจะเป็นวิธีที่ง่ายที่สุด แต่อาจจะทำให้เกิดความสับสนในการ maintenance ในอนาคต เพราะฉะนั้นจากประสบการณ์ตรงเราก็ไม่ขอแนะนำวิธีนี้ (เวลา search ก็งง ตกหล่นง่ายอีกด้วย)

เราจึงขอเสนอวิธีที่เราเคยลองใช้มานะคะ ตามแต่สถานการณ์

หากเป็นการสลับ tag แค่ 2 tag ให้ใช้ if

เพิ่ม prop เพื่อเช็คว่าถ้าจริงให้ return tag section หากไม่ใช่ จะใช้ div แทน

ข้อเสียของวิธีการเขียนแบบนี้คือ เราจะต้องใส่ style ไว้สองจุด ซึ่งก็ทำให้เวลาเราแก้ css เราก็ต้องแก้ 2 จุด ดังนั้นเราอาจจะเขียน if เป็นอีกแบบค่ะ

การใช้ React Fragment เข้ามาช่วย ทำให้เราสามารถวาง style ไว้ที่เดียวได้เลย

แต่ถ้าเราเจอ component ที่ซับซ้อนและยาวมากๆ การ if ใน component เดียวก็อาจจะทำให้การแก้ไขลำบากเหมือนกันค่ะ เลยจะวกกลับมาที่การแยก component โดยที่เราเอาเจ้าก้อน css ออกมาเป็นตัวกลาง แล้ว import เข้ามาใช้แทน

component ที่ใช้ div

component ที่ใช้ section

แล้วถ้าหากอยากให้ tag รองรับมากกว่า 2 การใช้ if หรือแยก component แบบใช้ style ร่วม อาจไม่ตอบโจทย์ ดังนั้นลองมาดูวิธีนี้กันค่ะ

กำหนด prop ที่จะแทนที่ html tag ไว้ แล้วตั้งค่า defaultProps ค่าเริ่มต้นในกรณีที่ prop นั้นๆ ไม่ถูกส่งมาเอาไว้ โดยอาจจะมีการ rename ไว้ตามภาพค่ะ

สาเหตุที่เราต้อง rename เนื่องจากโดยส่วนมากเราจะตั้งชื่อ prop เป็นตัวพิมพ์เล็ก (tag) เวลาแสดงผล มันก็จะพ่นออกมาเป็น <tag> เหมือนเราเขียนใน tag html ซึ่งเราไม่ต้องการให้เป็นแบบนั้น การ rename เป็นตัวพิมพ์ใหญ่ (Tag) จึงเป็นทางแก้ไขให้เข้าใจว่าส่วนนี้คือ prop ที่เราจะแทนที่ค่ะ

browser จะ render tag ที่ไม่ถูกต้อง หากเราใช้ tag ที่เป็นตัวพิมพ์เล็ก ค่ะ

ส่วนเวลาเราจะเปลี่ยน tag ก็แค่ส่งค่าเป็น string เข้ามาเท่านี้เองค่ะ

หวังว่า วิธีที่เราเขียนมาจะเป็นประโยชน์กับเพื่อนๆ ที่เข้ามาอ่านไม่มากก็น้อยนะคะ

หากเพื่อนๆ มีเทคนิคอื่นๆ แนะนำเพิ่มเติมสามารถคอมเม้นแชร์กันได้เลยค่ะ >_<