คู่มือสำหรับผู้เริ่มต้นทำปฏิกิริยาอุปกรณ์ประกอบฉาก [ด้วยไวยากรณ์]

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

React Props คืออะไร?

คำว่า "Props" เป็นคีย์เวิร์ดในไลบรารี React ที่หมายถึงคุณสมบัติ พวกเขายังบางครั้งเรียกว่าตัวแปรส่วนกลางหรือวัตถุในส่วนประกอบ React React props คล้ายกับอาร์กิวเมนต์ใน HTML บางสิ่งที่น่าสังเกตเกี่ยวกับอุปกรณ์ประกอบฉาก React ก็คือพวกมันไหลในทิศทางเดียวเสมอ และข้อมูลภายในนั้นเป็นแบบอ่านอย่างเดียว สิ่งนี้ทำให้ไม่เปลี่ยนรูป หมายความว่าข้อมูลที่ไหลจากองค์ประกอบหนึ่งไม่สามารถเปลี่ยนแปลงในอีกองค์ประกอบหนึ่งได้ เราสามารถเข้าใจสิ่งนี้ได้ด้วยตัวอย่างของฟังก์ชันที่บริสุทธิ์และไม่บริสุทธิ์

นี่เป็นฟังก์ชันล้วนๆ เนื่องจากจะให้เอาต์พุตเดียวกันเสมอสำหรับอินพุตเดียวกัน:

ฟังก์ชั่น prod (a, b) {

ส่งคืน a * b;

}

นี่เป็นฟังก์ชันที่ไม่บริสุทธิ์เนื่องจากมันจัดการข้อมูลเข้าของตัวเอง:

ฟังก์ชันฝาก (บัญชี จำนวนเงิน){

account.total += จำนวน;

}

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

ไวยากรณ์สำหรับการผ่านและการเข้าถึง React Props

ดังที่ได้กล่าวไว้ก่อนหน้านี้ React props นั้นคล้ายกับอาร์กิวเมนต์ HTML และด้วยเหตุนี้ในการส่งหรือเพิ่ม props ไปยังส่วนประกอบ เราสามารถทำได้คล้ายกับการส่งแอตทริบิวต์ HTML

ไวยากรณ์:

<component_name props_name = “value” />

ในไวยากรณ์ข้างต้น ' component_name' คือชื่อของส่วนประกอบที่เราจำเป็นต้องส่งผ่านอุปกรณ์ประกอบฉาก props_name คือชื่อของอุปกรณ์ประกอบฉาก และ ค่า คือค่าอุปกรณ์ประกอบฉาก

เราสามารถเข้าถึงอุปกรณ์ประกอบฉากจากภายในคลาสของส่วนประกอบได้

ไวยากรณ์:

this.props .props_name;

ในไวยากรณ์ข้างต้น this.props เป็นอ็อบเจ็กต์ส่วนกลางที่ใช้ในการเข้าถึง props จากภายในคลาสของคอมโพเนนต์ และ props_name คือชื่อของ React props ที่เราต้องการเข้าถึง

อ่าน: JavaScript กับ JQuery: ความแตกต่างระหว่าง JavaScript และ JQuery

วิธีการใช้ React Props?

มีสองวิธีที่แตกต่างกันในการใช้ข้อมูล React props ที่ไม่เปลี่ยนรูปในส่วนประกอบใดๆ สองวิธีนี้คือการเพิ่มอุปกรณ์ประกอบฉากในฟังก์ชัน reactDom.render() ในไฟล์หลักหรือโดยการเพิ่มข้อมูลเป็นอุปกรณ์ประกอบฉากเริ่มต้นในส่วนประกอบเอง นี่คือวิธีการใช้ React props ในทั้งสองวิธี:

การใช้ React Props จาก react.Dom.render() Function

ก่อนอื่นเราต้องเพิ่มอุปกรณ์ประกอบฉากในไฟล์ส่วนประกอบ

นำเข้า React จาก 'react'; //นำเข้าไลบรารี React

class Example expands React.component { /* example คือชื่อส่วนประกอบที่ขยายคุณสมบัติของ React component class' */

เรนเดอร์ () {

กลับ (

<div>

<h2>{this.props. firstProp } ใน h2</h2>

<h3>{นี่ อุปกรณ์ประกอบฉาก วินาทีProp } ใน h3</h3>

</div>

);

}

}

ตัวอย่าง ค่าเริ่มต้นของการส่งออก ; //การส่งออกส่วนประกอบ

ตอนนี้ เราต้องเพิ่มมูลค่าให้กับอุปกรณ์ประกอบฉากผ่านฟังก์ชัน reactDom.render() ในไฟล์หลักและเข้าถึงได้จากที่นั่น

นำเข้า React จาก 'react';

นำเข้า ReactDom จาก 'react-dom';

นำเข้า ตัวอย่าง จาก './Example.jsx';

ReactDom.render(< ตัวอย่าง firstProp = “นี่คือ firstProp ” secondProp = “นี่คือ secondProp ”/>, document.getElementById('example'));

ตัวอย่าง ค่าเริ่มต้นของการส่งออก ;

ผล:

นี่คือ อุปกรณ์ประกอบฉากแรก ใน h2

นี่คืออุปกรณ์ประกอบฉากที่ สอง ใน h3

การใช้ React Props กับ Props เริ่มต้นใน Component Constructor

เพิ่มอุปกรณ์ประกอบฉากและค่าของมันในไฟล์ส่วนประกอบ

นำเข้า React จาก 'react'; //นำเข้าไลบรารี React

class Example expands React.component { /* example คือชื่อส่วนประกอบที่ขยายคุณสมบัติของ React component class' */

เรนเดอร์ () {

กลับ (

<div>

<h2>{this.props. firstProp }</h2>

<h3>{นี่ อุปกรณ์ประกอบฉาก วินาทีProp }</h3>

</div>

);

}

}

ตัวอย่าง .deafultProps = {

firstProp : “นี่คือ firstProp ”,

SecondProp : “นี่คือ อุปกรณ์ประกอบ ฉาก ที่สอง ”

}

ตัวอย่าง ค่าเริ่มต้นของการส่งออก ; //การส่งออกส่วนประกอบ

การเข้าถึง React props จากไฟล์หลัก

นำเข้า React จาก 'react';

นำเข้า ReactDom จาก 'react-dom';

นำเข้า ตัวอย่าง จาก './Example.jsx';

ReactDom.render(< Example />, document.getElementById('example'));

ผลลัพธ์สำหรับสิ่งนี้จะคล้ายกับการใช้ฟังก์ชัน reactDom.render() ยกเว้นว่าคราวนี้จะทำได้ด้วยความช่วยเหลือของอุปกรณ์ประกอบฉากเริ่มต้น

เช็คเอาท์: Vue vs React: ความแตกต่างระหว่าง Vue และ React

วิธีส่ง React Props จากส่วนประกอบหนึ่งไปยังอีกส่วนประกอบหนึ่ง

การใช้งานหลักของ React props คือการส่งผ่านข้อมูลระหว่างส่วนประกอบใน React ตัวอย่างต่อไปนี้จะช่วยให้เราเข้าใจว่าข้อมูลถูกส่งผ่านไปอย่างไร

นำเข้า React จาก 'react';

คลาส Fruit ขยาย React.Component {

เรนเดอร์ () {

กลับมา <h4>ฉันคือ {this.props. ชื่อ } ใน h4</h4>

}

}

คำถาม ระดับ ขยาย React.Component {

เรนเดอร์ () {

กลับ (

<div>

<h3>คุณคือผลไม้อะไร? ใน h3</h3>

< ชื่อผลไม้ = “มะม่วง” / > //สร้างอุปกรณ์ประกอบฉากและกำหนดค่า

</div>

);

}

}

ReactDom.render(<คำถาม />, document.getElementById('fruit'));

สิ่งนี้จะให้ผลลัพธ์ต่อไปนี้:

คุณเป็นผลไม้อะไร ใน h3

ฉันคือมะม่วงใน h4

ใช้สถานะและอุปกรณ์ประกอบฉากร่วมกัน

อย่างที่เราทุกคนทราบดีว่า React เป็นภาษาไดนามิก และความยืดหยุ่นของมันคือ USP ดังนั้นการใช้ React props เพียงอย่างเดียวไม่เพียงพอในการพัฒนาแอปพลิเคชัน ปัญหานี้แก้ไขได้ด้วยความช่วยเหลือของรัฐ สถานะเป็นอีกหนึ่งคุณลักษณะของ React ที่ใช้สำหรับจัดการข้อมูล มาดูกันว่าเราจะรวม React props และ state เข้าด้วยกันได้อย่างไร เพื่อทำให้แอปพลิเคชันของเรามีอินเทอร์แอกทีฟและมีไดนามิกมากขึ้น

นำเข้า React จาก 'react';

class Car ขยาย React.Component {

ตัวสร้าง (อุปกรณ์ประกอบฉาก) {

สุดยอด(อุปกรณ์ประกอบฉาก);

this.state = {

firstCar: “นี่คือเมอร์เซเดส-เบนซ์! ใน h2”, //การกำหนดค่าให้กับ state

SecondCar: “นี่คือ BMW! ใน h3” // กำหนดค่าให้กับ state

}

}

เรนเดอร์ () {

กลับ (

<div>

<FirstCar firstProp = {this.state.firstCar}/> //การกำหนดค่าให้กับอุปกรณ์ประกอบฉาก

<SecondCar secondProp = {this.state.secondCar}/> //การกำหนดค่าให้กับอุปกรณ์ประกอบฉาก

</div>

);

}

}

คลาส FirstCar ขยาย React.Component {

เรนเดอร์ () {

กลับ (

<div>

<h2>{this.props.firstProp}</h2>

</div>

);

}

}

คลาส SecondCar ขยาย React.Component {

เรนเดอร์ () {

กลับ (

<div>

<h3>{this.props.secondProp}</h3>

</div>

);

}

}

ส่งออกรถยนต์เริ่มต้น;

ตอนนี้เราต้องเข้าถึงข้อมูลจากไฟล์หลัก

นำเข้า React จาก 'react';

นำเข้า ReactDOM จาก 'react-dom';

นำเข้ารถยนต์จาก './Car.jsx';

ReactDOM.render(<รถยนต์ />, document.getElementById('car'));

ผลลัพธ์:

นี่คือเมอร์เซเดส-เบนซ์! ในชั่วโมงครึ่ง

นี่คือบีเอ็มดับเบิลยู! ใน h3

อ่านเพิ่มเติม: ความแตกต่างระหว่าง Node JS และ React JS

สรุปว่า

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

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

หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับการตอบสนอง, การพัฒนาแบบฟูลสแตก, ลองดูประกาศนียบัตร PG ของ upGrad & IIIT-B ด้านการพัฒนาซอฟต์แวร์แบบครบวงจร ซึ่งออกแบบมาสำหรับมืออาชีพที่ทำงานและมีการฝึกอบรมที่เข้มงวดมากกว่า 500 ชั่วโมง โครงการมากกว่า 9 โครงการ และการมอบหมายงาน สถานะศิษย์เก่า IIIT-B โครงการหลักและความช่วยเหลือด้านงานกับบริษัทชั้นนำ