ตอบสนองอุปกรณ์ประกอบฉาก
Props คืออาร์กิวเมนต์ที่ส่งผ่านไปยังส่วนประกอบ React
อุปกรณ์ประกอบฉากถูกส่งไปยังส่วนประกอบผ่านแอตทริบิวต์ HTML
propsย่อมาจากคุณสมบัติ
ตอบสนองอุปกรณ์ประกอบฉาก
React Props เป็นเหมือนอาร์กิวเมนต์ของฟังก์ชันใน JavaScript และแอตทริบิวต์ใน HTML
ในการส่งอุปกรณ์ประกอบฉากไปยังส่วนประกอบ ให้ใช้ไวยากรณ์เดียวกันกับแอตทริบิวต์ HTML:
ตัวอย่าง
เพิ่มแอตทริบิวต์ "แบรนด์" ให้กับองค์ประกอบรถยนต์:
const myelement = <Car brand="Ford" />;ส่วนประกอบได้รับอาร์กิวเมนต์เป็นpropsวัตถุ:
ตัวอย่าง
ใช้แอตทริบิวต์ยี่ห้อในองค์ประกอบ:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
ผ่านข้อมูล
อุปกรณ์ประกอบฉากยังเป็นวิธีที่คุณส่งข้อมูลจากองค์ประกอบหนึ่งไปยังอีกองค์ประกอบหนึ่งเป็นพารามิเตอร์
ตัวอย่าง
ส่งคุณสมบัติ "แบรนด์" จากส่วนประกอบโรงรถไปยังส่วนประกอบรถยนต์:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
function Garage() {
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand="Ford" />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
หากคุณมีตัวแปรที่จะส่ง และไม่ใช่สตริงดังในตัวอย่างข้างต้น คุณเพียงแค่ใส่ชื่อตัวแปรในวงเล็บปีกกา:
ตัวอย่าง
สร้างตัวแปรที่ตั้งชื่อcarNameและส่งไปยัง
Carส่วนประกอบ:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
function Garage() {
const carName = "Ford";
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand={ carName } />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
หรือถ้าเป็นวัตถุ:
ตัวอย่าง
สร้างวัตถุที่มีชื่อcarInfoและส่งไปยัง
Carส่วนประกอบ:
function Car(props) {
return <h2>I am a { props.brand.model }!</h2>;
}
function Garage() {
const carInfo = { name: "Ford", model: "Mustang" };
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand={ carInfo } />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
หมายเหตุ: React Props เป็นแบบอ่านอย่างเดียว! คุณจะได้รับข้อผิดพลาดหากคุณพยายามเปลี่ยนค่า