પ્રતિક્રિયા ઘટકો કેવી રીતે કંપોઝ કરવી

બ્લોગ

વેબ એપ્સ અને મોબાઇલ એપ્સ બનાવવા માટે રિએક્ટ એક લોકપ્રિય લાઇબ્રેરી છે.



આ લેખમાં, અમે પ્રતિક્રિયા ઘટકો કેવી રીતે કંપોઝ કરવું તે જોઈશું.

ઉચ્ચ-ઓર્ડર ઘટકો

ઉચ્ચ ક્રમના ઘટકો એવા ઘટકો છે જે અન્ય ઘટકોને દલીલો તરીકે સ્વીકારે છે અને તેમાં ફેરફાર કર્યા પછી તેમને પરત કરે છે.



ઉચ્ચ ક્રમના ઘટક નીચેની જેમ દેખાય છે:

const HoC = Component => EnhancedComponent

અમે એક ઘટક લઈએ છીએ અને ઉન્નત ઘટક પરત કરીએ છીએ.



દાખલા તરીકે, આપણે લખી શકીએ:

બહુવિધ અક્ષરો અજગર પર વિભાજિત
const withClassName = Component => props => ( )

પછી આપણે એક ઘટક પરત કરી શકીએ છીએ જેમાં વર્ગ નામ પ્રોપ ઉમેરવામાં આવે છે.

તેનો સીધો ઉપયોગ કરવાને બદલે, અમે લખીએ છીએ:

const ComponentWithClassName = withClassName(Component)

અમે હંમેશા અમારા ઉચ્ચ ક્રમના ઘટકને | _+_ | સાથે શરૂ કરીએ છીએ જેથી અમે તેમને અલગ કહી શકીએ.

ઉચ્ચ ક્રમના ઘટકો સાથે, અમે એકબીજા સાથે સમાન હોય તેવા વિવિધ બનાવી શકીએ છીએ, પરંતુ મોટે ભાગે સમાન.

ફરી કોમ્પોઝ કરો

રિકોમ્પોઝ પેકેજમાં વિવિધ હાઇ-ઓર્ડર ઘટકો છે જેનો આપણે વ્યક્તિગત રીતે અથવા સંયોજનમાં ઉપયોગ કરી શકીએ છીએ.

તેને ઇન્સ્ટોલ કરવા માટે, અમે ચલાવી શકીએ છીએ:

with

પછી આપણે લખીને તેનો ઉપયોગ કરી શકીએ:

npm install recompose --save

અમે | _+_ | બનાવ્યું | _+_ | સાથે ઘટક | _+_ | નો ઉપયોગ કરવાને બદલે રાજ્યને પકડી રાખવાનું કાર્ય હૂક

પછી આપણે આપણા ઘટકને | _+_ | માં પસાર કરીએ છીએ કાર્ય કરો જેથી આપણને જરૂરી પ્રોપ્સ મળી શકે.

તેને સેટ કરવા માટેનું રાજ્ય અને કાર્ય પ્રોપ્સ તરીકે ઉપલબ્ધ છે.

આ આપણા રાજ્યને બહુવિધ ઘટકોમાં ઉપયોગમાં લેવા દે છે.

અન્ય ઘણા કાર્યો છે જેનો આપણે ઉપયોગ કરી શકીએ છીએ.

દાખલા તરીકે, આપણે લખી શકીએ:

import React from 'react'; import { withState } from 'recompose'; const enhance = withState('count', 'setCount', 0); const Counter = enhance(({ count, setCount }) => ( Count: {count} setCount(n => n + 1)}>Increment )); export default function App() { return ; }

અમે ફોન કર્યો | _+_ | બહુવિધ ઉચ્ચ ક્રમના ઘટકોને એક સાથે જોડવા.

અમારી પાસે | _+_ | કેટલાક પ્રોપ્સ માં પસાર કરવા માટે.

અને અમે ફોન કર્યો | _+_ | માળખું સપાટ કરવા માટે | _+_ | આધાર.

પછી બનાવવા માટે | _+_ | અમે એક ઘટકમાં | _+_ | માં પસાર કરીએ છીએ કાર્ય કરો અને પ્રોપ્સનાં મૂલ્યો બતાવો.

પછી અમે | _+_ | પ્રદર્શિત કરીએ છીએ માં | _+_ | .

બાળક તરીકે કાર્ય

અન્ય ઘટકોના ચાઇલ્ડ પ્રોપ તરીકે કાર્યો પસાર કરી શકાય છે.

ઉદાહરણ તરીકે, અમે લખીએ છીએ:

Counter

તેનો ઉપયોગ કરવા માટે, અમે લખી શકીએ છીએ:

withState

અમે ટ functionગ્સની વચ્ચે એક ફંક્શનમાં પસાર થયા જેથી તેને | _+_ | માં બોલાવી શકાય .

ઉપરાંત, આપણે પરિમાણોમાં પાસ કરી શકીએ છીએ. દાખલા તરીકે, આપણે લખી શકીએ:

સામગ્રી UI ચિહ્ન રંગ
useState

અમારી પાસે | _+_ | છે ઘટક, આપણે | _+_ | કહીએ છીએ , જે ટagsગ્સ વચ્ચે છે.

પછી | _+_ | માં , આપણે એક કાર્યમાં પસાર કરીએ છીએ જેને આપણે | _+_ | માં બોલાવીએ છીએ .

આ આપણા કાર્યને વધુ લવચીક બનાવે છે

#જાવાસ્ક્રિપ્ટ #વેબ-ડેવલપમેન્ટ #પ્રોગ્રામિંગ #રીએક્ટ

medium.com

પ્રતિક્રિયા ઘટકો કેવી રીતે કંપોઝ કરવી

વેબ એપ્સ અને મોબાઇલ એપ્સ બનાવવા માટે રિએક્ટ એક લોકપ્રિય લાઇબ્રેરી છે. આ પ્રતિક્રિયા ટ્યુટોરીયલમાં, અમે પ્રતિક્રિયા ઘટકો કેવી રીતે કંપોઝ કરવું તે જોશું. ઘટકોને ફરીથી વાપરી શકાય તેવા ટુકડાઓમાં વિભાજીત કરો