တုံ့ပြန်မှုစာရင်းများ
React တွင်၊ သင်သည် loop အမျိုးအစားအချို့ဖြင့် စာရင်းများကို တင်ဆက်မည်ဖြစ်သည်။
JavaScript map()
array method သည် ယေဘူယျအားဖြင့် ဦးစားပေးနည်းလမ်းဖြစ်သည်။
map()
နည်းလမ်းကို
ပြန်လည်သုံးသပ်မှု လိုအပ်ပါက ၊ ES6 ကဏ္ဍကို ကြည့်ပါ ။
ဥပမာ-
ကားဂိုထောင်မှ ကားများအားလုံးကို တင်ဆက်လိုက်ရအောင်။
function Car(props) {
return <li>I am a { props.brand }</li>;
}
function Garage() {
const cars = ['Ford', 'BMW', 'Audi'];
return (
<>
<h1>Who lives in my garage?</h1>
<ul>
{cars.map((car) => <Car brand={car} />)}
</ul>
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
သင့်တွင် ဤကုဒ်ကို run သောအခါ create-react-app
၊ ၎င်းသည် အလုပ်လုပ်မည်ဖြစ်သော်လည်း စာရင်းအရာများအတွက် ပေးထားသည့် "သော့" မရှိကြောင်း သတိပေးချက်ကို လက်ခံရရှိမည်ဖြစ်သည်။
လက်မှတ်ရယူပါ။
$95 စာရင်းသွင်းပါ။
သော့များ
ကီးများသည် တုံ့ပြန်မှုကို အစိတ်အပိုင်းများကို ခြေရာခံနိုင်စေပါသည်။ ဤနည်းဖြင့်၊ အကြောင်းအရာတစ်ခုကို အပ်ဒိတ်လုပ်သည် သို့မဟုတ် ဖယ်ရှားပါက၊ စာရင်းတစ်ခုလုံးအစား ထိုအရာကိုသာ ပြန်လည်ဖော်ပြပါမည်။
သော့များသည် မွေးချင်းတစ်ဦးစီအတွက် သီးသန့်ဖြစ်ရန် လိုအပ်သည်။ သို့သော် ၎င်းတို့ကို တစ်ကမ္ဘာလုံးတွင် ပွားနိုင်သည်။
ယေဘုယျအားဖြင့်၊ သော့သည် အရာတစ်ခုစီအတွက် သီးခြားသတ်မှတ်ထားသော ID ဖြစ်သင့်သည်။ နောက်ဆုံးအားကိုးရာအနေဖြင့်၊ သင်သည် array အညွှန်းကို သော့တစ်ခုအဖြစ် အသုံးပြုနိုင်သည်။
ဥပမာ-
သော့များပါဝင်ရန် ကျွန်ုပ်တို့၏ယခင်နမူနာကို ပြန်လည်သုံးသပ်ကြည့်ကြပါစို့။
function Car(props) {
return <li>I am a { props.brand }</li>;
}
function Garage() {
const cars = [
{id: 1, brand: 'Ford'},
{id: 2, brand: 'BMW'},
{id: 3, brand: 'Audi'}
];
return (
<>
<h1>Who lives in my garage?</h1>
<ul>
{cars.map((car) => <Car key={car.id} brand={car.brand} />)}
</ul>
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));