အစိတ်အပိုင်းများကို တုံ့ပြန်ပါ။
အစိတ်အပိုင်းများသည် HTML ဒြပ်စင်များကို ပြန်ပေးသည့် လုပ်ဆောင်ချက်များနှင့် တူသည်။
အစိတ်အပိုင်းများကို တုံ့ပြန်ပါ။
အစိတ်အပိုင်းများသည် သီးခြားလွတ်လပ်ပြီး ပြန်သုံးနိုင်သော ကုဒ်များဖြစ်သည်။ ၎င်းတို့သည် JavaScript လုပ်ဆောင်ချက်များကဲ့သို့ တူညီသော ရည်ရွယ်ချက်ကို လုပ်ဆောင်သော်လည်း သီးခြားလုပ်ဆောင်ပြီး HTML ကို ပြန်ပေးသည်။
အစိတ်အပိုင်းများသည် Class အစိတ်အပိုင်းများနှင့် Function အစိတ်အပိုင်းများဟူ၍ နှစ်မျိုးရှိပြီး ဤသင်ခန်းစာတွင် Function အစိတ်အပိုင်းများကို အာရုံစိုက်ပါမည်။
React ကုဒ် အဟောင်းများတွင်၊ အဓိကအားဖြင့် အသုံးပြုသော Class အစိတ်အပိုင်းများကို သင်တွေ့နိုင်သည်။ React 16.8 တွင် ထည့်သွင်းထားသည့် Hooks နှင့်အတူ Function အစိတ်အပိုင်းများကို ယခုအသုံးပြုရန် အကြံပြုထားသည်။ သင်၏ကိုးကားမှုအတွက် Class အစိတ်အပိုင်းများပေါ်တွင် ရွေးချယ်နိုင်သောအပိုင်းတစ်ခုရှိသည်။
သင်၏ပထမအစိတ်အပိုင်းကိုဖန်တီးပါ။
React အစိတ်အပိုင်းကို ဖန်တီးသောအခါ၊ အစိတ်အပိုင်း၏အမည်သည် စာလုံးကြီးဖြင့် စတင်ရပါမည်။
အတန်းအစား
အတန်း၏ အစိတ်အပိုင်းတစ်ခုသည် extends React.Component
ထုတ်ပြန်ချက်ပါ၀င်ရမည်။ ဤထုတ်ပြန်ချက်သည် React.Component အတွက် အမွေဆက်ခံမှုကို ဖန်တီးပေးပြီး သင့်အစိတ်အပိုင်းကို React.Component ၏ လုပ်ဆောင်ချက်များကို ဝင်ရောက်ခွင့်ပေးသည်။
အစိတ်အပိုင်းသည် render()
နည်းလမ်းတစ်ခုလည်း လိုအပ်သည်၊ ဤနည်းလမ်းသည် HTML ကို ပြန်ပေးသည်။
ဥပမာ
ဟုခေါ်သော Class အစိတ်အပိုင်းတစ်ခုကို ဖန်တီးပါ။Car
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
လုပ်ဆောင်ချက် အစိတ်အပိုင်း
ဤသည်မှာ အထက်ဖော်ပြပါ ဥပမာနှင့် တူညီသော်လည်း ၎င်းအစား Function အစိတ်အပိုင်းကို အသုံးပြု၍ ဖန်တီးထားသည်။
Function အစိတ်အပိုင်းတစ်ခုသည် HTML ကိုပြန်ပေးသည်၊ နှင့် Class အစိတ်အပိုင်းတစ်ခုကဲ့သို့တူညီသောပုံစံအတိုင်းလုပ်ဆောင်သည်၊ သို့သော် Function အစိတ်အပိုင်းများကိုကုဒ်များစွာဖြင့်ရေးသားနိုင်ပြီး၊ နားလည်ရန်ပိုမိုလွယ်ကူသည်၊ ဤသင်ခန်းစာတွင်ပိုမိုနှစ်သက်မည်ဖြစ်သည်။
ဥပမာ
Function လို့ခေါ်တဲ့ အစိတ်အပိုင်းတစ်ခုကို ဖန်တီးပါ။Car
function Car() {
return <h2>Hi, I am a Car!</h2>;
}
လက်မှတ်ရယူပါ။
$95 စာရင်းသွင်းပါ။
အစိတ်အပိုင်းတစ်ခုကို ပုံဖေါ်ခြင်း။
ယခု သင်၏ React အပလီကေးရှင်းတွင် ဒြပ်စင်တစ်ခုကို ပြန်ပေးသည့် Car ဟုခေါ်သော အစိတ်အပိုင်း
<h2>
တစ်ခု ရှိသည်။
သင့်အပလီကေးရှင်းတွင် ဤအစိတ်အပိုင်းကို အသုံးပြုရန်၊ သာမန် HTML ကဲ့သို့ အလားတူ syntax ကို အသုံးပြုပါ-
<Car />
ဥပမာ
Car
"အမြစ်" ဒြပ်စင်ရှိ အစိတ်အပိုင်းကို ပြ ပါ-
ReactDOM.render(<Car />, document.getElementById('root'));
ကျားကန်
props
အစိတ်အပိုင်းများ ကို ဂုဏ်သတ္တိများ ၏ အတိုကောက် အဖြစ် ဖြတ်သန်းနိုင်သည် ။
Props သည် function arguments များကဲ့သို့ဖြစ်ပြီး ၎င်းတို့ကို attributes အဖြစ် အစိတ်အပိုင်းထဲသို့ သင်ပေးပို့ပါသည်။
props
နောက်အခန်းတွင် သင်ပိုမိုလေ့လာသင်ယူလိမ့်မည် ။
ဥပမာ
ကားအစိတ်အပိုင်းသို့ အရောင်တစ်ခုပေးပို့ရန် ရည်ညွှန်းချက်တစ်ခုကို အသုံးပြုပြီး render() လုပ်ဆောင်ချက်တွင် အသုံးပြုပါ-
function Car(props) {
return <h2>I am a {props.color} Car!</h2>;
}
ReactDOM.render(<Car color="red"/>, document.getElementById('root'));
အစိတ်အပိုင်းများတွင် အစိတ်အပိုင်းများ
ကျွန်ုပ်တို့သည် အခြားသော အစိတ်အပိုင်းများအတွင်းရှိ အစိတ်အပိုင်းများကို ကိုးကားနိုင်သည်-
ဥပမာ
Garage အစိတ်အပိုင်းအတွင်းရှိ ကားအစိတ်အပိုင်းကို အသုံးပြုပါ-
function Car() {
return <h2>I am a Car!</h2>;
}
function Garage() {
return (
<>
<h1>Who lives in my Garage?</h1>
<Car />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Files ရှိ အစိတ်အပိုင်းများ
React သည် ကုဒ်ကို ပြန်လည်အသုံးပြုခြင်းအကြောင်းဖြစ်ပြီး၊ သင်၏အစိတ်အပိုင်းများကို သီးခြားဖိုင်များအဖြစ် ခွဲရန် အကြံပြုထားသည်။
ထိုသို့ပြုလုပ်ရန်၊ ဖိုင်တိုးချဲ့မှုတစ်ခုဖြင့် ဖိုင်အသစ်တစ်ခုကို ဖန်တီးပြီး ၎င်း .js
အတွင်းကုဒ်ကို ထည့်ပါ။
ဖိုင်အမည်သည် စာလုံးကြီးဖြင့် စတင်ရမည်ကို သတိပြုပါ။
ဥပမာ
ဤသည်မှာ ဖိုင်အသစ်ဖြစ်ပြီး၊ ၎င်းကို "Car.js" ဟု အမည်ပေးထားပါသည်။
function Car() {
return <h2>Hi, I am a Car!</h2>;
}
export default Car;
ကားအစိတ်အပိုင်းကိုသုံးနိုင်စေရန်၊ သင်၏အက်ပ်လီကေးရှင်းတွင် ဖိုင်ကိုထည့်သွင်းရပါမည်။
ဥပမာ
ယခု ကျွန်ုပ်တို့သည် အပလီကေးရှင်းတွင် "Car.js" ဖိုင်ကို တင်သွင်းပြီး ၎င်းကို
Car
ဤနေရာတွင် ဖန်တီးထားသကဲ့သို့ အစိတ်အပိုင်းကို ကျွန်ုပ်တို့အသုံးပြုနိုင်ပါသည်။
import React from 'react';
import ReactDOM from 'react-dom';
import Car from './Car.js';
ReactDOM.render(<Car />, document.getElementById('root'));