การเรียนรู้ Props และ PropTypes ใน React

props และ PropTypes ทำให้คุณสับสนหรือไม่? คุณไม่ได้โดดเดี่ยว. ฉันจะแนะนำคุณเกี่ยวกับทุกสิ่งเกี่ยวกับอุปกรณ์ประกอบฉากและ PropTypes พวกเขาสามารถทำให้ชีวิตของคุณง่ายขึ้นอย่างมากเมื่อพัฒนาแอพ React บทช่วยสอนนี้จะแนะนำรายละเอียดเกี่ยวกับอุปกรณ์ประกอบฉาก การส่งและการเข้าถึงอุปกรณ์ประกอบฉาก และการส่งข้อมูลไปยังส่วนประกอบใดๆ โดยใช้อุปกรณ์ประกอบฉาก

การสร้างแอปพลิเคชัน React เกี่ยวข้องกับการแยกส่วน UI ออกเป็นหลายองค์ประกอบ ซึ่งหมายความว่าเราจะต้องส่งข้อมูลจากองค์ประกอบหนึ่งไปยังอีกองค์ประกอบหนึ่ง อุปกรณ์ประกอบฉากเป็นกลไกสำคัญในการส่งข้อมูลระหว่างส่วนประกอบ React และเราจะพิจารณาอย่างละเอียดถี่ถ้วน บทความนี้จะไม่สมบูรณ์โดยไม่ต้องดู PropTypes เพราะจะตรวจสอบให้แน่ใจว่าส่วนประกอบใช้ประเภทข้อมูลที่ถูกต้องและส่งข้อมูลที่ถูกต้อง

แนวทางปฏิบัติที่ดีในการตรวจสอบข้อมูลที่เราได้รับเป็นอุปกรณ์ประกอบฉากโดยใช้ PropTypes ถือเป็นแนวทางปฏิบัติที่ดี คุณจะได้เรียนรู้เกี่ยวกับการรวม PropTypes ใน React การตรวจสอบการพิมพ์ด้วย PropTypes และการใช้ defaultProps ในตอนท้ายของบทช่วยสอนนี้ คุณจะเข้าใจวิธีใช้อุปกรณ์ประกอบฉากและ PropTypes อย่างมีประสิทธิภาพ สิ่งสำคัญคือคุณต้องมีความรู้พื้นฐานเกี่ยวกับวิธีการทำงานของ React อยู่แล้ว

ทำความเข้าใจอุปกรณ์ประกอบฉาก

React ช่วยให้เราส่งข้อมูลไปยังส่วนประกอบโดยใช้สิ่งที่เรียกว่าอุปกรณ์ประกอบฉาก (ย่อมาจากคุณสมบัติ) เนื่องจาก React ประกอบด้วยส่วนประกอบหลายอย่าง อุปกรณ์ประกอบฉากจึงทำให้สามารถแชร์ข้อมูลเดียวกันข้ามส่วนประกอบที่ต้องการได้ มันใช้ประโยชน์จากการไหลของข้อมูลแบบทิศทางเดียว (ส่วนประกอบ parent-to-child) อย่างไรก็ตาม ด้วยฟังก์ชันเรียกกลับ มันเป็นไปได้ที่จะส่งอุปกรณ์ประกอบฉากกลับจากลูกไปยังองค์ประกอบหลัก

ข้อมูลเหล่านี้สามารถมาในรูปแบบที่แตกต่างกัน: ตัวเลข สตริง อาร์เรย์ ฟังก์ชัน ออบเจ็กต์ ฯลฯ เราสามารถส่งอุปกรณ์ประกอบฉากไปยังองค์ประกอบใดๆ ก็ได้ เช่นเดียวกับที่เราสามารถประกาศแอตทริบิวต์ในแท็ก HTML ใดๆ ก็ได้ ดูรหัสด้านล่าง:

 <PostList posts={postsList} />

ในตัวอย่างนี้ เรากำลังส่งพร็อพที่ชื่อ posts ไปยังองค์ประกอบที่ชื่อ PostList พร็อพนี้มีมูลค่า {postsList} มาดูรายละเอียดวิธีการเข้าถึงและส่งข้อมูลกัน

ผ่านและเข้าถึงอุปกรณ์ประกอบฉาก

เพื่อให้บทช่วยสอนนี้น่าสนใจ ให้สร้างแอปพลิเคชันที่แสดงรายชื่อและโพสต์ของผู้ใช้ การสาธิตแอปแสดงอยู่ด้านล่าง:

แอปประกอบด้วยคอลเล็กชันของคอมโพเนนต์: คอมโพเนนต์ ของ App คอมโพเนนต์ PostList และคอมโพเนนต์ Post

รายการโพสต์จะต้องมีข้อมูลเช่น content และ name ผู้ใช้ เราสามารถสร้างข้อมูลได้ดังนี้:

 const postsList = [ { id: 1, content: "The world will be out of the pandemic soon", user: "Lola Lilly", }, { id: 2, content: "I'm really exited I'm getting married soon", user: "Rebecca Smith", }, { id: 3, content: "What is your take on this pandemic", user: "John Doe", }, { id: 4, content: "Is the world really coming to an end", user: "David Mark", }, ];

หลังจากนี้ เราจำเป็นต้องมีองค์ประกอบ App เพื่อดึงข้อมูล นี่คือโครงสร้างพื้นฐานของส่วนประกอบนั้น:

 const App = () => { return ( <div> <PostList posts={postsList} /> </div> ); };

ในที่นี้ เรากำลังส่งต่ออาร์เรย์ของโพสต์ที่เป็นพร็อพไปยัง PostList (ซึ่งเราจะสร้างขึ้นในอีกสักครู่) องค์ประกอบหลัก PostList จะเข้าถึงข้อมูลใน postsList ซึ่งจะถูกส่งต่อเป็นอุปกรณ์ประกอบการ posts ไปยังองค์ประกอบย่อย ( Post ) หากคุณยังจำได้ แอปของเราประกอบด้วยสามองค์ประกอบ ซึ่งเราจะสร้างขึ้นเมื่อเราดำเนินการต่อไป

มาสร้าง PostList กันเถอะ:

 class PostList extends React.Component { render() { return ( <React.Fragment> <h1>Latest Users Posts</h1> <ul> {this.props.posts.map((post) => { return ( <li key={post.id}> <Post {...post} /> </li> ); })} </ul> </React.Fragment> ); } }

คอมโพเนนต์ PostList จะได้รับ posts เป็นพร็อพ จากนั้นจะวนซ้ำผ่านเสา posts this.props.posts เพื่อส่งคืนแต่ละรายการที่ Post (ซึ่งเราจะสร้างแบบจำลองในภายหลัง) นอกจากนี้ โปรดสังเกตการใช้ key ในตัวอย่างด้านบน สำหรับผู้ที่เพิ่งเริ่มใช้ React คีย์คือตัวระบุที่ไม่ซ้ำกันซึ่งกำหนดให้กับแต่ละรายการในรายการของเรา ทำให้เราสามารถแยกแยะระหว่างรายการต่างๆ ในกรณีนี้ กุญแจสำคัญคือ id ของแต่ละโพสต์ ไม่มีโอกาสที่รายการสองรายการจะมี id เดียวกัน ดังนั้นจึงเป็นข้อมูลที่ดีที่จะใช้เพื่อการนี้

ในขณะเดียวกัน คุณสมบัติที่เหลือจะถูกส่งต่อเป็นอุปกรณ์ประกอบฉากไปยังองค์ประกอบ Post ( <Post {...post} /> )

มาสร้างองค์ประกอบ Post และใช้อุปกรณ์ประกอบฉากกัน:

 const Post = (props) => { return ( <div> <h2>{props.content}</h2> <h4>username: {props.user}</h4> </div> ); };

เรากำลังสร้างองค์ประกอบ Post เป็นองค์ประกอบการทำงาน แทนที่จะกำหนดเป็นองค์ประกอบคลาสเหมือนที่เราทำสำหรับองค์ประกอบ PostList ฉันทำสิ่งนี้เพื่อแสดงให้คุณเห็นถึงวิธีการเข้าถึงอุปกรณ์ประกอบฉากในองค์ประกอบการทำงาน เปรียบเทียบกับวิธีที่เราเข้าถึงอุปกรณ์ประกอบฉาก ด้วย this.props เนื่องจากเป็นองค์ประกอบที่ใช้งานได้ เราจึงสามารถเข้าถึงค่าต่างๆ ได้ โดยใช้ props

ตอนนี้เราได้เรียนรู้วิธีส่งผ่านและเข้าถึงอุปกรณ์ประกอบฉาก และวิธีส่งข้อมูลจากองค์ประกอบหนึ่งไปยังอีกองค์ประกอบหนึ่ง มาดูว่าอุปกรณ์ประกอบฉากทำงานกับฟังก์ชันอย่างไร

ผ่านฟังก์ชั่นผ่านอุปกรณ์ประกอบฉาก

ในส่วนก่อนหน้านี้ เราได้ส่งผ่านอาร์เรย์ของข้อมูลเป็นอุปกรณ์ประกอบฉากจากองค์ประกอบหนึ่งไปยังอีกองค์ประกอบหนึ่ง แต่ถ้าเราใช้ฟังก์ชันแทนล่ะ? React ช่วยให้เราส่งผ่านฟังก์ชันระหว่างส่วนประกอบต่างๆ สิ่งนี้มีประโยชน์เมื่อเราต้องการทริกเกอร์การเปลี่ยนแปลงสถานะในองค์ประกอบหลักจากองค์ประกอบย่อย อุปกรณ์ประกอบฉากควรจะไม่เปลี่ยนรูป คุณไม่ควรพยายามเปลี่ยนค่าของเสา คุณต้องทำในองค์ประกอบที่ส่งต่อซึ่งเป็นองค์ประกอบหลัก

มาสร้างแอปสาธิตอย่างง่ายที่ฟังเหตุการณ์การคลิกและเปลี่ยนสถานะของแอปกัน ในการเปลี่ยนสถานะของแอปในองค์ประกอบอื่น เราต้องส่งต่อฟังก์ชันของเราไปยังส่วนประกอบที่ต้องการเปลี่ยนสถานะ ด้วยวิธีนี้ เราจะมีฟังก์ชันในองค์ประกอบย่อยที่สามารถเปลี่ยนสถานะได้

ฟังดูซับซ้อนไปหน่อยไหม? ฉันได้สร้างแอปพลิเคชัน React อย่างง่ายที่เปลี่ยนสถานะด้วยการคลิกปุ่มและแสดงข้อมูลต้อนรับบางส่วน:

ในการสาธิตด้านบน เรามีสององค์ประกอบ หนึ่งคือองค์ประกอบของ App ซึ่งเป็นองค์ประกอบหลักที่มีสถานะของแอปและฟังก์ชันในการตั้งค่าสถานะ ChildComponent จะเป็นรายการย่อยในสถานการณ์นี้ และหน้าที่ของมันคือการแสดงข้อมูลต้อนรับเมื่อสถานะเปลี่ยนแปลง

แบ่งสิ่งนี้ออกเป็นรหัส:

 class App extends React.Component { constructor(props) { super(props); this.state = { isShow: true, }; } toggleShow = () => { this.setState((state) => ({ isShow: !state.isShow })); }; render() { return ( <div> <ChildComponent isShow={this.state.isShow} clickMe={this.toggleShow} /> </div> ); } }

ขอให้สังเกตว่าเราได้ตั้งค่าสถานะของเรา true และวิธีการเปลี่ยนสถานะจะถูกสร้างขึ้นในองค์ประกอบของ App ในฟังก์ชัน render() เราส่งสถานะของแอปเป็น prop isShow ไปยังองค์ประกอบ ChildComponent นอกจากนี้เรายังส่ง toggleShow() เป็นอุปกรณ์ประกอบฉากชื่อ clickMe

เราจะใช้สิ่งนี้ใน ChildComponent ซึ่งมีลักษณะดังนี้:

 class ChildComponent extends React.Component { clickMe = () => { this.props.clickMe(); }; render() { const greeting = "Welcome to React Props"; return ( <div style={{ textAlign: "center", marginTop: "8rem" }}> {this.props.isShow ? ( <h1 style={{ color: "green", fontSize: "4rem" }}>{greeting}</h1> ) : null} <button onClick={this.clickMe}> <h3>click Me</h3> </button> </div> ); } }

สิ่งที่สำคัญที่สุดข้างต้นคือองค์ประกอบ App ส่งผ่านฟังก์ชั่นเป็นอุปกรณ์ประกอบฉากไปยัง ChildComponent ฟังก์ชัน clickMe() ใช้สำหรับตัวจัดการการคลิกใน ChildComponent ในขณะที่ ChildComponent ไม่ทราบตรรกะของฟังก์ชัน แต่จะทริกเกอร์ฟังก์ชันเมื่อมีการคลิกปุ่มเท่านั้น สถานะจะเปลี่ยนไปเมื่อมีการเรียกใช้ฟังก์ชัน และเมื่อสถานะเปลี่ยนไปแล้ว สถานะจะถูกส่งต่อเป็นอุปกรณ์ประกอบฉากอีกครั้ง ส่วนประกอบที่ได้รับผลกระทบทั้งหมด เช่น ลูกในกรณีของเราจะแสดงผลอีกครั้ง

เราต้องส่งสถานะของแอป isShow เพื่อเป็นพร็อ ChildComponent เพราะหากไม่มี เราไม่สามารถเขียนตรรกะด้านบนเพื่อแสดง greeting เมื่อสถานะได้รับการอัปเดต

เมื่อพิจารณาถึงฟังก์ชันแล้ว มาดูการตรวจสอบความถูกต้องกัน เป็นวิธีปฏิบัติที่ดีเสมอที่จะตรวจสอบความถูกต้องของข้อมูลที่เราได้รับผ่านอุปกรณ์ประกอบฉากโดยใช้ PropTypes มาดำน้ำกันตอนนี้เลย

PropTypes ใน React คืออะไร?

PropTypes เป็นกลไกเพื่อให้แน่ใจว่าส่วนประกอบใช้ประเภทข้อมูลที่ถูกต้องและส่งข้อมูลที่ถูกต้อง และส่วนประกอบนั้นใช้อุปกรณ์ประกอบฉากที่ถูกต้อง และส่วนประกอบที่ได้รับจะได้รับอุปกรณ์ประกอบฉากที่ถูกต้อง

เราสามารถคิดได้เหมือนลูกสุนัขที่ถูกส่งไปที่ร้านขายสัตว์เลี้ยง ร้านขายสัตว์เลี้ยงไม่ต้องการหมู สิงโต กบ หรือตุ๊กแก แต่ต้องการลูกสุนัข PropTypes ช่วยให้แน่ใจว่าชนิดข้อมูลที่ถูกต้อง (ลูกสุนัข) ถูกส่งไปยังร้านขายสัตว์เลี้ยง ไม่ใช่สัตว์ชนิดอื่น

ในหัวข้อข้างต้น เราได้ทราบวิธีส่งข้อมูลไปยังส่วนประกอบโดยใช้อุปกรณ์ประกอบฉาก เราส่งอุปกรณ์ประกอบฉากโดยตรงเป็นแอตทริบิวต์ไปยังส่วนประกอบ และเรายังส่งอุปกรณ์ประกอบฉากจากภายนอกส่วนประกอบและใช้ในส่วนประกอบนั้น แต่เราไม่ได้ตรวจสอบประเภทของค่าที่เราได้รับจากส่วนประกอบของเราผ่านอุปกรณ์ประกอบฉาก หรือทุกอย่างยังคงใช้งานได้

เป็นหน้าที่ของเราทั้งหมดว่าจะตรวจสอบข้อมูลที่เราได้รับในส่วนประกอบผ่านอุปกรณ์ประกอบฉากหรือไม่ แต่ในการใช้งานที่ซับซ้อน การตรวจสอบความถูกต้องของข้อมูลนั้นเป็นแนวปฏิบัติที่ดีเสมอ

การใช้ PropTypes

ในการใช้ PropTypes เราต้องเพิ่มแพ็คเกจเป็นการพึ่งพาแอปพลิเคชันของเราผ่าน npm หรือ Yarn โดยเรียกใช้รหัสต่อไปนี้ในบรรทัดคำสั่ง สำหรับ npm:

 npm install --save prop-types

และสำหรับเส้นด้าย:

 yarn add prop-types

ในการใช้ PropTypes ก่อนอื่นเราต้องนำเข้า PropTypes จากแพ็คเกจ prop-types:

 import PropTypes from 'prop-types';

ลองใช้ ProTypes ในแอปของเราที่แสดงรายการโพสต์ของผู้ใช้ นี่คือวิธีที่เราจะใช้สำหรับองค์ประกอบ Post :

 Post.proptypes = { id: PropTypes.number, content: PropTypes.string, user: PropTypes.string }

ที่นี่ PropTypes.string และ PropTypes.number เป็นเครื่องมือตรวจสอบอุปกรณ์ประกอบฉากที่สามารถใช้เพื่อให้แน่ใจว่าอุปกรณ์ประกอบฉากที่ได้รับเป็นประเภทที่ถูกต้อง ในโค้ดด้านบนนี้ เรากำลังประกาศว่า id เป็นตัวเลข ในขณะที่ content และ user เป็นสตริง

นอกจากนี้ PropTypes ยังมีประโยชน์ในการจับบั๊ก และเราสามารถบังคับส่งอุปกรณ์ประกอบฉากโดยใช้ isRequired :

 Post.proptypes = { id: PropTypes.number.isRequired, content: PropTypes.string.isRequired, user: PropTypes.string.isRequired }

PropTypes มีตัวตรวจสอบความถูกต้องมากมาย ต่อไปนี้คือบางส่วนที่พบบ่อยที่สุด:

 Component.proptypes = { stringProp: PropTypes.string, // The prop should be a string numberProp: PropTypes.number, // The prop should be a number anyProp: PropTypes.any, // The prop can be of any data type booleanProp: PropTypes.bool, // The prop should be a function functionProp: PropTypes.func // The prop should be a function arrayProp: PropTypes.array // The prop should be an array }

มีประเภทอื่นๆ ให้เลือก ซึ่งคุณสามารถตรวจสอบได้ในเอกสารประกอบของ React]

อุปกรณ์ประกอบฉากเริ่มต้น

หากเราต้องการส่งข้อมูลเริ่มต้นบางส่วนไปยังส่วนประกอบของเราโดยใช้อุปกรณ์ประกอบฉาก React ช่วยให้เราสามารถทำเช่นนั้นกับสิ่งที่เรียกว่า defaultProps ในกรณีที่ PropTypes เป็นทางเลือก (นั่นคือ ไม่ได้ใช้ isRequired ) เราสามารถตั้งค่า defaultProps ได้ อุปกรณ์ประกอบฉากเริ่มต้นช่วยให้มั่นใจว่าอุปกรณ์ประกอบฉากมีค่าในกรณีที่ไม่มีอะไรผ่านไป นี่คือตัวอย่าง:

 Class Profile extends React.Component{ // Specifies the default values for props static defaultProps = { name: 'Stranger' }; // Renders "Welcome, Stranger": render() { return <h2> Welcome, {this.props.name}<h2> } }

ที่นี่ defaultProps จะใช้เพื่อให้แน่ใจว่า this.props.name มีค่า ในกรณีที่องค์ประกอบหลักไม่ได้ระบุ หากไม่มีการส่งชื่อไปยังคลาส Profile ก็จะมีคุณสมบัติเริ่มต้น Stranger ที่จะถอยกลับ สิ่งนี้จะป้องกันข้อผิดพลาดเมื่อไม่มีเสาส่งผ่าน ฉันแนะนำให้คุณใช้ defaultProps กับ PropType ที่เป็นตัวเลือกทุกครั้ง

บทสรุป

ฉันหวังว่าคุณจะสนุกกับการทำงานในบทช่วยสอนนี้ หวังว่ามันจะแสดงให้คุณเห็นว่า props และ propTypes มีความสำคัญต่อการสร้างแอปพลิเคชัน React อย่างไร เพราะหากไม่มีพวกมัน เราจะไม่สามารถส่งผ่านข้อมูลระหว่างส่วนประกอบเมื่อมีการโต้ตอบเกิดขึ้น พวกเขาเป็นส่วนสำคัญของสถาปัตยกรรมที่ขับเคลื่อนด้วยส่วนประกอบและการจัดการสถานะที่ React ได้รับการออกแบบมา

PropType เป็นโบนัสสำหรับการรับรองว่าส่วนประกอบใช้ประเภทข้อมูลที่ถูกต้องและส่งข้อมูลที่ถูกต้อง และส่วนประกอบนั้นใช้อุปกรณ์ประกอบฉากที่ถูกต้อง และส่วนประกอบที่ได้รับจะได้รับอุปกรณ์ประกอบฉากที่ถูกต้อง

หากคุณมีคำถามใดๆ คุณสามารถทิ้งคำถามไว้ในส่วนความคิดเห็นด้านล่าง เรายินดีที่จะตอบทุกคำถามและแก้ไขปัญหาต่างๆ กับคุณ

อ้างอิง

• “การคิดในการตอบสนอง”, React Docs
• “รายการและคีย์”, React Docs
• “ Typechecking ด้วย PropTypes”, React Docs
• “วิธีส่งต่ออุปกรณ์ประกอบฉากไปยังส่วนประกอบในการตอบสนอง”, Robin Wieruch