องค์ประกอบและการสืบทอด
React มี Component ที่มีประสิทธิภาพ และเราจะแนะนำให้ใช้องค์ประกอบแทนการสืบทอด เพื่อนำโค้ดมาใช้ซ้ำระหว่าง Component ในส่วนนี้เราจะพิจารณาปัญหาสัก 2-3 ข้อที่นักพัฒนาซอฟต์แวร์ใหม่ ๆ ไปทำปฏิกิริยามักเข้าถึงเพื่อสร้างการสืบทอดและแสดงวิธีแก้ปัญหาเหล่านี้ด้วย Component
Containment
Component บางตัวไม่รู้จักลูกๆ ก่อนเวลาอันควร นี่เป็นเรื่องธรรมดาสำหรับ Compinent เช่น Sidebar หรือ Dialog ซึ่งแสดงถึง "boxes" ทั่วไป เราขอแนะนำให้ใช้ Component นี้ ในการใช้ children พิเศษในการส่งผ่าน Elements ของ children ไปสู่ output โดยตรง :
function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
ซึ่งจะทำให้ Component อื่นๆส่งผ่านให้ children เข้าไปได้โดยพละการ :
function WelcomeDialog() {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
Welcome
</h1>
<p className="Dialog-message">
Thank you for visiting our spacecraft!
</p>
</FancyBorder>
);
}
ผลลัพธ์ที่ได้ :
Exam1
จากโค้ดด้สนบน อะไรก็ตามที่อยู่ภายในแท็ก <FancyBorder> จะได้รับการส่งผ่านไปยัง Component FancyBorder ในรูปแบบของ children เนื่องจาก FancyBorder แสดงผล {props.children} ภายใน <div> Element ที่ส่งผ่านจะปรากฏใน output สุดท้าย
ถึงแม้ว่าจะเป็นเรื่องที่พบได้บ่อยครั้ง แต่บางครั้งเราอาจต้องสร้าง "Holes" หลายชุดใน Component
Example :
function SplitPane(props) {
return (
<div className="SplitPane">
<div className="SplitPane-left">
{props.left}
</div>
<div className="SplitPane-right">
{props.right}
</div>
</div>
);
}
function App() {
return (
<SplitPane
left={
<Contacts />
}
right={
<Chat />
} />
);
}
ผลลัพท์ที่ได้ :
Exam2
จากตัวอย่างข้างบนนี้ React Element เช่น <Contacts /> และ <Chat /> เป็นเพียง object เท่านั้น ดังนั้นเราจะสามารถส่งผ่านข้อมูลเหล่านี้เป็น props ต่างๆเช่นข้อมูลอื่น ๆ
Specialization
บางครั้งเราคิดว่า Component เป็น "special cases" ของ Component อื่น ๆ ตัวอย่างเช่นเราอาจกล่าวได้ว่า WelcomeDialog เป็นเคสพิเศษของ Dialog ใน React นี้เราสามารถทำได้โดย Component ซึ่งส่วนประกอบ "specific" ที่เฉพาะเจาะจง จะแสดงผลเป็น "generic" ขึ้นมาและกำหนดค่าโดยใช้ props :
function Dialog(props) {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
{props.title}
</h1>
<p className="Dialog-message">
{props.message}
</p>
</FancyBorder>
);
}
function WelcomeDialog() {
return (
<Dialog
title="Welcome"
message="Thank you for visiting our spacecraft!" />
);
}
ผลลัพธ์ที่ได้ :
exam3
องค์ประกอบทำงานอย่างเท่าเทียมกันดี สำหรับ Component ที่กำหนดเป็น class :
function Dialog(props) {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
{props.title}
</h1>
<p className="Dialog-message">
{props.message}
</p>
{props.children}
</FancyBorder>
);
}
class SignUpDialog extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleSignUp = this.handleSignUp.bind(this);
this.state = {login: ''};
}
render() {
return (
<Dialog title="Mars Exploration Program"
message="How should we refer to you?">
<input value={this.state.login}
onChange={this.handleChange} />
<button onClick={this.handleSignUp}>
Sign Me Up!
</button>
</Dialog>
);
}
handleChange(e) {
this.setState({login: e.target.value});
}
handleSignUp() {
alert(`Welcome aboard, ${this.state.login}!`);
}
}
ผลลัพธ์ที่ได้ คือ เมื่อเรากรอกชื่อลงไป แล้วกด Signin จากนั้น Alert Dialog จะขึ้นมาแล้วแล้วทักทายเรา :
Exam4
Exam5
แล้วสิ่งที่สืบทอดคืออะไร
Facebook ใช้ React ในหลายพัน Component และยังไม่พบกรณีการใช้งานใด ๆ ที่จะแนะนำให้สร้างลำดับชั้นของส่วนรับมรดก Component
ข้อมูลอ้างอิง : https://reactjs.org