React props – Սկսնակների ուղեցույց

React js-ը հայտնի javascript գրադարան է օգտատերերի միջերեսներ ստեղծելու համար: Այն թույլ է տալիս մշակել բազմակի օգտագործման բաղադրիչներ, որոնք կարող են օգտագործվել ամբողջ հավելվածում: Այս բաղադրիչները դառնում են դինամիկ և հարմարեցված React-ի օգնությամբ: Այս հոդվածում մենք կանդրադառնանք react js props-ի հիմունքներին, կհասկանանք, թե ինչպես է գործում props և ինչպես մուտք գործել և օգտագործել հենարաններ՝ նայելով մի քանի օրինակներ: Սա պետք է ներկայացնի և տա ձեզ թեմայի վերաբերյալ նախնական գիտելիքներ:

ինչ կանդրադառնանք.

• Ներածություն
• Ինչ են React-ի օժանդակ միջոցները
• Ինչպես մուտք գործել և օգտագործել React-ի հենարաններ
• React-ի կանխադրված հենարաններ
• Եզրակացություն

Ներածություն

props-ը (հատկությունների հապավումը) օբյեկտի տեսակ է, այն տվյալների փոխանցման միջոց է մայր բաղադրիչից դեպի երեխա բաղադրիչ: Սա թույլ է տալիս ծնող բաղադրիչին վերահսկել երեխայի բաղադրիչի վարքն ու տեսքը: Սա թույլ է տալիս ամբողջական հարմարեցում, կրկնակի օգտագործման հնարավորություն և նվազեցնում է անհարկի կրկնվող կոդերը ձեր react հավելվածում:

Որո՞նք են React պրոֆիլները:

React-ում Props-ը գործում է որպես react բաղադրիչների միջև հաղորդակցության ալիք: Սա թույլ է տալիս մեկ բաղադրիչին, մայր բաղադրիչին վերահսկել մեկ այլ բաղադրիչի տեսքը և վարքը՝ երեխայի բաղադրիչը: Այն ունի նմանատիպ աշխատանքային գործառույթ, որը նման է HTML ատրիբուտներին:

Ինչպես օգտագործել React պրոֆիլները

React հենակետերը փոխանցվում են որպես ատրիբուտներ JSX-ի երեխայի բաղադրիչին, օրինակ, ենթադրենք, որ մենք ունենք ծնող բաղադրիչ, որը կոչվում է «Հավելված» և երեխա բաղադրիչ՝ «About»: մենք ուզում ենք «անուն» և «տարիքային» հենարան փոխանցել «Հավելված» բաղադրիչից «About» բաղադրիչին, այսպես ենք անում.

//parent Component
function App(){
 return(
 <div>
 <About name=”john” age=”25"/>
 </div>
 );
}
//Child Component
function About(props){
 return(
 <p>Hi, My name is {props.name}. I am {props.age} years old</p>
 );
}

Այս օրինակում «Հավելված» բաղադրիչը մայր բաղադրիչն է և այն ներկայացնում է «Բաղադրիչի մասին» օրինակը, ընդունում է անուն և տարիքային հենարան, որն այնուհետև օգտագործվում է «Մի մասին» հաղորդագրությունը հարմարեցնելու համար: Մեկ այլ դեպքում «prop» բաղադրիչի արժեքը կարող է փոխվել «About» բաղադրիչի վերօգտագործման համար:

//parent Component
function App(){
 return(
 <div>
 <About name=”john” age=”25"/>
 <About name=”Laura” age=”19"/>
 </div>
 );
}
//Child Component
function About(props){
 return(
 <p>Hi, My name is {props.name}. I am {props.age} years old</p>
 );
}

Այս օրինակն ավելացնում է ևս մեկ «About» բաղադրիչ և այն նորից օգտագործում՝ փոխելով «անուն» և «տարիքային» հենարանի արժեքը «john»-ից և «25»-ից համապատասխանաբար «Laura» և «19»:

Ինչպես մուտք գործել և օգտագործել React պրոֆիլները երեխայի բաղադրիչում:

React props-ին հասանելի են դառնում «props» արգումենտը ֆունկցիայի հայտարարագրում ավելացնելով:

//parent Component
function App(){
 return(
 <div>
 <About name=”john” age=”25"/>
 </div>
 );
}
//Child Component
function About(props){
 return(
 <p>Hi, My name is {props.name}. I am {props.age} years old</p>
 );
}

Այնուհետև մենք կարող ենք օգտագործել «props.name» և «props.age»՝ համապատասխանաբար «name» և «age» հենարանի արժեքը ցուցադրելու համար:

React-ի կանխադրված հենարանները

Երբեմն հենակետը կարող է չփոխանցվել մայր բաղադրիչից, ինչը կարող է սխալներ առաջացնել երեխայի բաղադրիչում: Սրանից խուսափելու համար մենք կարող ենք բաղադրիչի համար լռելյայն props սահմանել:

//Child Component
function About(props){
 return(
 <p>Hi, My name is {props.name}. I am {props.age} years old</p>
 );
About.defaultProps = {
 name:”yourName”,
 age:”yourAge”,
}
}

այս օրինակում, եթե ծնող բաղադրիչից «անուն» կամ «տարիքային» հենարան չի փոխանցվում, «yourName»-ի լռելյայն արժեքը կօգտագործվի «name» հենարանի համար, իսկ «yourAge»-ը կօգտագործվի «տարիքային» հենակետի համար: .

Եզրակացություն

React props-ը հզոր գործիք է react-ում բազմակի օգտագործման և դինամիկ բաղադրիչներ ստեղծելու համար։ Տվյալները ծնողից երեխայի բաղադրիչին փոխանցելով՝ մենք կարող ենք ստեղծել բաղադրիչներ, որոնք կարող են կրկնակի օգտագործել հավելվածում։ Մինչ դուք շարունակում եք զարգանալ React-ում, դուք կարող եք հանդիպել ավելի առաջադեմ թեմաների, ինչպիսիք են հենակետային հորատումը և համատեքստը, ահա թե ինչու է կարևոր React պրովիկի լավ պատկերացում ունենալը: Նոր հասկացություններ սովորելը, հատկապես ծրագրավորման ոլորտում, կարող է վախեցնել, եթե ծանրաբեռնված եք և չեք կարողանում հստակ հասկանալ, ես խորհուրդ կտայի փորձել մուտք գործել և օգտագործել այլ ռեսուրսներ և նյութեր: Ընդմիջեք, եթե ձեզ անհրաժեշտ է մեկը և ամենակարևորը պրակտիկա, պրակտիկա և պրակտիկա:

Իմ անունն էՀուսեյնի Ահմեդ, ես առջևի ծրագրավորող եմ: Ես գրում եմ front end լեզուների, շրջանակների և նորագույն տեխնոլոգիաների մասին: Ես կցանկանայի լսել ձեր կարծիքը այս հոդվածի վերաբերյալ: Ազատորեն գրեք մեկնաբանություն ստորև կամ կապվեք ինձ հետ՝
WhatsApp
Twitter
LinkedIn