Back to Question Center
0

પ્રતિક્રિયામાં નવું શું છે?            પ્રતિક્રિયામાં નવું શું છે? સંબંધિત વિષયો: ES6AngularJSNode.jsTools અને & મીમલ્ટ

1 answers:
પ્રતિક્રિયામાં નવું શું છે?

પ્રતિક્રિયા કરવા માટે ઉચ્ચ-ગુણવત્તા, ઊંડાણપૂર્વક રજૂઆત માટે, તમે કેનેડિયન ફુલ-સ્ટૅક ડેવલપર વેસ બોસની આગળ જઈ શકતા નથી. અહીં તેમના અભ્યાસક્રમનો પ્રયાસ કરો અને કોડ SITEPOINT મેળવવા માટે 25% બંધ અને સાઇટપૉઇન્ટને સપોર્ટ કરવામાં મદદ માટે ઉપયોગ કરો.

આ પોસ્ટમાં, અમે સેમલ્ટ 16.

માં કેટલીક નવી સુવિધાઓનો ઉપયોગ કરીને મ્યુઝિક પ્લેયર કેવી રીતે બનાવવું તે શીખીશું.

આ મ્યુઝિક પ્લેયરને અમલમાં મૂકવા માટે, અમે રીટેક્ટ 16 માંના કેટલાક ફેરફારો વિશે શીખીશું. સેમલ્ટ ખૂબ થોડા ફેરફારો છે, તેથી અમે તે બધાને આવરી નહીં કરીશું, પરંતુ અમે તે મહત્વપૂર્ણ અને તમે આજે અમલ કરી શકો છો

આ પોસ્ટનો સંપૂર્ણ સ્રોત ગિથબ પર ઉપલબ્ધ છે - book values for commercial trucks.

એપ્લિકેશન શરૂ કરવા, કોડ ડાઉનલોડ કરો, સીડી પ્રોજેક્ટ ડાયરેક્ટરી અને પ્રકારમાં:

  npm સ્થાપિતnpm પ્રારંભ   

રિએક્ટ એપ્લિકેશનમાં રાજ્ય

બધા પ્રતિક્રિયા કાર્યક્રમોમાં એક સંપત્તિ રાજ્ય નો સમાવેશ થાય છે જે નક્કી કરે છે કે કઈ ઘટકો (અને તે ઘટકો સાથે સંકળાયેલ કોઈપણ ડેટા) પ્રદર્શિત થવો જોઈએ.

અમારા મ્યુઝિક પ્લેયર પાસે એક સ્ટેટ પ્રોપર્ટી છે જેમાં બે મહત્વની માહિતીઓનો સમાવેશ થાય છે: એક વેરીએબલ જે સ્પષ્ટ કરે છે કે ખેલાડી સંગીત વગાડ્યું છે - વગાડતા બુલિયન - અને એક વેરિયેબલ જે ટ્રેક કરે છે વર્તમાન ટ્રેકની સ્થિતિ - ધ વર્તમાનટેકઈન્ડએક્સ ચલ.

  આ. રાજ્ય = {રમી: ખોટા,currentTrackIndex: 0};   

રાજ્ય શું છે?

જ્યારે આપણે કોઈ ઘટક રાજ્ય નો સંદર્ભ લઈએ છીએ, તો અમારે તેનો અર્થ એ છે કે પૃષ્ઠ પર ઘટકના ઉદાહરણનો સ્નેપશોટ છે.

પ્રતિક્રિયાના ઘટકો પોતાની સ્થિતિ વ્યાખ્યાયિત કરી શકે છે, જે અમે આ પોસ્ટમાં ઉપયોગ કરીશું. જ્યારે અમે રિએક્ટ ઘટકમાં રાજ્યનો ઉપયોગ કરીએ છીએ, ત્યારે ઘટક કહેવાય છે સ્ટેટફુલ . પ્રતિક્રિયા ઘટક રાજ્યના ઘટકો, જેમ કે અમારા મ્યુઝિક પ્લેયરને સંભાળવા માટે સ્ટેટ પ્રોપર્ટીનો ઉપયોગ કરીને પોતાની સ્થિતિ વ્યાખ્યાયિત કરી શકે છે.

વપરાશકર્તાએ પ્લે , વિરામ , આગામી , અને અગાઉના બટનો અને ખેલાડીના ટ્રેક પર ક્લિક કરીને, અમારા ઘટક તેની વર્તમાન સ્થિતિને અપડેટ કરશે.

પ્રોપ્સ વિરુદ્ધ રાજ્ય

કાર્યક્રમોની પ્રતિક્રિયા માટે, પ્રોપ અને રાજ્ય વચ્ચેના ભેદને સમજવું અગત્યનું છે. અમારા મ્યુઝિક પ્લેયર પાસે બે સ્ટેટ વેરિયેબલ્સ છે જે નક્કી કરે છે કે આપણી એપ્લિકેશન સમયસર આપેલ સમયે પ્રદર્શિત થાય છે. એપ ઘટક એ આપણા મુખ્ય ઘટક છે જે આપણા બાળક ઘટકોનું પ્રદર્શન કરે છે - નિયંત્રણો ઘટક અને ટ્રેકલિસ્ટ ઘટક. આ બે ઘટકોને અમારી અરજીની સ્થિતિ વિશેની માહિતી પ્રાપ્ત કરવા માટે, એપ ઘટક માહિતીને બાળકો ઘટકોની પ્રોપ્સ તરીકે આપશે. આ પ્રોપ્સ યોગ્ય રીતે તેમના એપ્લિકેશનના ટુકડાને પ્રદર્શિત કરવા માટે બાળ ઘટકમાં ઉપયોગમાં લઈ શકાય છે. સમજવા માટે બીજી મહત્ત્વની વસ્તુ એ છે કે દર વખતે એપ ઘટક સુધારાઓ, અમારા નિયંત્રણો ઘટક અને ટ્રેકલિસ્ટ ઘટક પણ અપડેટ કરવામાં આવશે, કારણ કે તેઓ માહિતીની પર આધાર રાખે છે આ એપ ઘટક

નિયંત્રણો

અમારું કંટ્રોલ્સ ઘટક અમારી એપ ઘટકનો પ્રથમ બાળક છે. નિયંત્રણો ઘટક બે પ્રોપ્સ આપવામાં આવે છે: ઑનક્લિક અને વગાડવા . ઑનક્લિક પ્રોપ અમને નિયંત્રણ ઘટક કંપન એપ ઘટકમાં વ્યાખ્યાયિત કરેલ અમારી હેન્ડલક્લિક ફંક્શનને પસાર કરવાની પરવાનગી આપે છે. જ્યારે વપરાશકર્તા અમારા કંટ્રોલ્સ ઘટક, હેન્ડલક્લિક ફંક્શનને બોલાશે.

ચાલો આપણે કેવી રીતે અમારા બટનો રેન્ડર કરીએ અને અમારા કંટ્રોલ્સ ઘટકમાં ક્લિક્સ હેન્ડલ કરીએ.

અમારા નિયંત્રણો ઘટકમાં આપણી પાસે ત્રણ મહત્વપૂર્ણ બટનો છે:

  1. << (પહેલાનું) બટન - ડાબી તરફના એક તીર આયકન - જે સૂચિમાં પહેલાંના ટ્રેકને પસંદ કરે છે
  2. પ્લે / થોભો બટન જે સંગીત ભજવે છે અને વિરામ લે છે
  3. >> (આગામી) બટન - જમણી તરફ સંકેત કરતી એક તીર આયકન - જે સૂચિમાં આગલી ટ્રેક પસંદ કરે છે.

જ્યારે આ બટનો પર ક્લિક કરવામાં આવે ત્યારે, અમે ક્લિક હેન્ડલર કાર્યને કૉલ કરીએ છીએ જે અમે એપ ઘટકમાંથી પસાર કર્યો હતો. અમારા મ્યુઝિક પ્લેયર એપ્લિકેશનમાંના દરેક બટનો પાસે id છે, જે ચોક્કસ ક્લિક કેવી રીતે નિયંત્રિત કરવો તે નક્કી કરવામાં અમારી સહાય કરશે.

હેન્ડલક્લિક ફંક્શનના આંતરિકમાં, અમે સ્વિચ નિવેદનનો ઉપયોગ કરીએ છીએ જે બટન પર ક્લિક કરેલું આઇડી નો ઉપયોગ કરે છે - ઇ. લક્ષ્ય એડી કેવી રીતે બટનથી ક્રિયા હેન્ડલ કરવું તે નક્કી કરવા માટે. આગામી વિભાગમાં, અમે દરેક નિવેદનમાં સ્વિચ નિવેદનમાં શું થાય છે તે જુઓ.

પ્લે બટન

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

સેટસ્ટેટ કાર્ય તમામ પ્રતિક્રિયા ઘટકો માટે ઉપલબ્ધ છે, અને તે જ રીતે આપણે અમારા મ્યુઝિક પ્લેયરની સ્થિતિને અપડેટ કરીએ છીએ. સેટસ્ટેટ ફંક્શનમાં પ્રથમ દલીલ કાં તો ઑબ્જેક્ટ અથવા કાર્ય હોઈ શકે છે. જો આપણે આગળની સ્થિતિની ગણતરી કરવા માટે એપ્લિકેશનની વર્તમાન સ્થિતિ પર આધાર રાખતા નથી, તો ઑબ્જેક્ટનો ઉપયોગ કરીને પ્રથમ દલીલ બરાબર સારુ અભિગમ છે અને આના જેવી દેખાય છે: આ. સેટસ્ટેટ ({currentState: 'newState'}) . અમારા કિસ્સામાં, અમે અમારી એપ્લિકેશનની આગામી સ્થિતિને નક્કી કરવા માટે એપ્લિકેશનની વર્તમાન સ્થિતિ પર આધાર રાખી રહ્યાં છીએ, તેથી અમે કોઈ કાર્યનો ઉપયોગ કરવા માગીએ છીએ. આ પ્રતિક્રિયા સૂચવે છે કે શા માટે આ મહત્વપૂર્ણ છે:

રિક્વેસ્ટ બેચ બહુવિધ સેટસ્ટેટ પ્રભાવ માટે એક જ અપડેટમાં કરે છે. કારણ કે આ પ્રોપ્સ અને આ. રાજ્ય અસુમેળથી અપડેટ થઈ શકે છે, તમારે આગામી સ્થિતિની ગણતરી માટે તેમના મૂલ્યો પર આધાર રાખવો જોઈએ નહીં.

સાધારણ 16 જેટલી વધુ તેના લક્ષણો (અસુમેળ રેન્ડરીંગ સહિત) ચાલુ કરે છે, આ તફાવત સમજવા માટે વધુ મહત્વપૂર્ણ બનશે.

જ્યારે પ્લે બટન ક્લિક કરે છે અને અમે સેટસ્ટેટ કૉલ કરીએ છીએ, ત્યારે અમે એક ફંક્શનમાં પસાર કરીએ છીએ, કારણ કે અમે વર્તમાન વર્તમાન ટ્રાફિક ઇન્ડેક્સ સ્ટેટ વેરીએબલના વર્તમાન મૂલ્ય પર આધાર રાખી રહ્યા છીએ. કાર્યમાં પસાર થનાર પ્રથમ દલીલ એ અમારી એપ્લિકેશનની પહેલાની સ્થિતિ છે, અને બીજી દલીલ વર્તમાન છે પ્રોપ્સ . અમારા કિસ્સામાં, આગલા રાજ્યને નક્કી કરવા માટે અમને ફક્ત એપ્લિકેશનની પહેલાંની સ્થિતિની જરૂર છે:

  કેસ "પ્લે":આ. સેટસ્ટેટ ((રાજ્ય, પ્રોપ્સ) => {ચાલો currentTrackIndex = રાજ્ય. currentTrackIndex;જો (વર્તમાનટ્રેકઅન્ડેક્ષ === 0) {currentTrackIndex = 1;}   

અમે વર્તમાન વર્તમાન TrackInndex ની અગાઉના કિંમત પર આધારિત વર્તમાન TrackInndex સેટ કર્યા પછી, અમે પછી અમે અપડેટ કરવા માંગો છો તે કિંમતો એક ઑબ્જેક્ટ પાછા. નાટક બટનના ક્લિકમાં, અમે સાચું સાચી સાચું બુલિયન વગાડવું અને વર્તમાન વર્તમાનટેકઈંડક્સ ની કિંમતને સેટ કરવા અપડેટ કરીએ છીએ:

  વળતર {રમતા: સાચું,વર્તમાનટ્રેકઅંડેક્સ: વર્તમાનટેકઆન્ડક્સ};   

બીજી દલીલ જે ​​ સેટસ્ટેટ ફંક્શનમાં પસાર થઈ છે તે કૉલબૅક ફંક્શન છે જે સેટસ્ટેટ કાર્ય પૂર્ણ થયા પછી કહેવાય છે. અમે આમાં પસાર કરીએ છીએ. playAudio અમારા સેટસ્ટેટ કાર્ય માટે બીજી દલીલ તરીકે કાર્ય કરે છે.

 }, આ. પ્લે ઑડિયો);   

જ્યારે પ્લે ઑડિઓ બટનને બોલાવવામાં આવે છે, ત્યારે આપણે ઑડિઓ ટેગને સંદર્ભિત કરીએ છીએ અને લોડ અને નાટક નાં કાર્યોને વેબ ઑડિઓ API

  પ્લેઑડિયો    {આ. ઓડિયોએલેમેન્ટ લોડ   ;આ. ઓડિયોએલેમેન્ટ રમવા  ;}   

રેફ એક ડોમ એલિમેન્ટ

ઑડિઓ ચલાવવા માટે વાસ્તવિક ઑડિઓ ડોમ એલિમેન્ટનો સંદર્ભ આપવા માટે, અમને ઘટકોને પ્રતિક્રિયા આપવા માટે વિશેષ વિશેષતાનો ઉપયોગ કરવાની જરૂર પડશે, રેફ વિશેષતા. પ્રતિક્રિયા દસ્તાવેજોમાંથી:

જ્યારે રેફ એટ્રીબ્યુટનો ઉપયોગ HTML એલિમેન્ટ પર થાય છે, તો રેફ કૉલબૅક તેના દલીલ તરીકે અંતર્ગત DOM ઘટક મેળવે છે.

આપણી પરિસ્થિતિમાં, અમે ઑડિઓ ડોમ એલિમેન્ટમાં રેફ એટ્રીબ્યુટ ઉમેરીએ છીએ અને તે દરેક ટ્રેક માટે ઑડિઓ ચલાવવા માટે અમને પરવાનગી આપે છે:

     

વિરામ બટન

જ્યારે વિરામ બટન ક્લિક કરવામાં આવે ત્યારે, અમે આને કૉલ કરીએ છીએ. સેટસ્ટેટ અને અમારા રમી બુલીઅન ખોટા માં સુયોજિત કરો.

  કેસ "વિરામ":આ. સેટસ્ટેટ ({રમત: ખોટા}, આ. વિરામ ઑડિઓ);વિરામ;   

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

  વિરામઆડિયો    {આ. ઓડિયોએલેમેન્ટ વિરામ   ;}   

ધ << (અગાઉના) બટન

જ્યારે << ચિહ્નને ક્લિક કરવામાં આવે છે, તો પાછલા બટનની id સ્વીચ સ્ટેટમેન્ટના "પાછલા" કેસ સાથે બંધબેસે છે, તેથી "પીવી" કેસ સાથે સંકળાયેલ કોડ ચલાવવામાં આવે છે. "પાછલા" કિસ્સામાં, અમે આને કૉલ કરીએ છીએ. setState ફરી એક કાર્ય જેમ અમે અમારી એપ્લિકેશન રમે છે અને અટકાવવા માટે કર્યું છે. આ સમયે, અમે મૂલ્ય ઘટાડવાની વર્તમાન ટ્રાફિક ઇન્ડેક્સ ની પહેલાની કિંમતનો ઉપયોગ કરીએ છીએ અને નવા મૂલ્યને વર્તમાન વર્તમાન ટ્રેકક્રાન્ડ સેટ કરવા ઑબ્જેક્ટ પરત કરીએ છીએ.

  કેસ "prev":આ. સેટસ્ટેટ ((રાજ્ય, પ્રોપ્સ) => {ચાલો currentIndex = રાજ્ય. currentTrackIndex - 1;જો (વર્તમાનઇન્ડેક્સ <= 0) {વળતર નલ;} બીજું {વળતર {રમતા: સાચું, વર્તમાનટેકઇન્ડેક્સ: વર્તમાનઇન્ડેક્સ};}}, આ. પ્લે ઑડિયો);   

રીટર્નિંગ નલ થી સેટસ્ટેટ

રીએક્ટ 16 માં નવા ફેરફારોમાંની એક એ છે કે જ્યારે આપણે સેટસ્ટેટ ફંક્શનમાંથી નલ પરત કરીશું, તો અમારી એપ્લિકેશન ફરીથી રજૂ કરવામાં આવશે નહીં. અમારી ટ્રેક લિસ્ટિંગમાં 11 ટ્રૅક ઉપલબ્ધ છે. જો વપરાશકર્તા << બટન પર ક્લિક કરવાનું ચાલુ રાખે છે, તો હાલના ટ્રાફિક ઇન્ડેક્સ તે 0 સુધી નહીં આવે ત્યાં સુધી ઘસડાશે. એકવાર તે 0 સુધી જાય, તો આપણે હવે વર્તમાનટેકઇન્ડેક્સ અને અમારે અમારી અરજી ફરીથી રજૂ કરવાની જરૂર નથી. જ્યારે આપણે >> ચિહ્ન પર ક્લિક કરીએ ત્યારે પણ તે જ કરીએ છીએ. જો વર્તમાનટેકઈંડૅક્સ અમારી સૂચિ માં ટ્રેકની સંખ્યા કરતા વધુ (અથવા વધારે) હોય, તો અમે નલ થી સેટસ્ટેટ થી પાછા આવીએ છીએ.

>> (આગામી) બટન

જ્યારે >> બટનને બોલાવવામાં આવે છે, ત્યારે અમારી પાસે સમાન કાર્યક્ષમતા << બટન છે. દરેક વખતે વપરાશકર્તા >> ક્લિક કરે ત્યારે, અમે હાલના ટ્રાફિક ઇન્ડેક્સ વધારીએ છીએ અને અમે તપાસ કરીએ છીએ કે વર્તમાન ટ્રેકઅન્ડેક્સ ટ્રૅક સૂચિની લંબાઈ કરતાં વધુ નથી. જો તે છે, તો અમે અમારા સેટસ્ટેટ ફંક્શન કોલમાં નલ પાછા છીએ.

  કેસ "આગામી":આ. સેટસ્ટેટ ((રાજ્ય, પ્રોપ્સ) => {ચાલો currentIndex = રાજ્ય. currentTrackIndex + 1;જો (વર્તમાનઇન્ડેક્સ> માહિતી. ટ્રેક. પ્લે ઑડિયો);વિરામ;   

ભલામણ અભ્યાસક્રમો

ટ્રેક સૂચિ

આ પોસ્ટના ખ્યાલો સમજવામાં સરળતા માટે અમે JSON ફાઇલમાં ટ્રેક સૂચિ ડેટાને હાર્ડ કોડેડ કરી છે. અમે ટોચ પર JSON ફાઇલમાંથી ડેટા આયાત કરીએ છીએ અને અમારા જીવનચક્ર પદ્ધતિમાં ઘટક ડિડમાઉન્ટ માં, અમે અમારા ટ્રેકલિસ્ટ ઘટકની સ્થિતિને સેટ કરી છે. અમારા ટ્રેકલિસ્ટ ઘટકમાં એક વેરિયેબલ છે, જે ટ્રેક વેરિયેબલ છે.

જીવનશૈલી પદ્ધતિઓ ઘટકડિડમાઉન્ટ અને ઘટકડ્યૂડઅપડેટ

દરેક પ્રતિક ઘટક, સેટસ્ટેટ કાર્ય ઉપરાંત, જીવનકાલીન પદ્ધતિઓ પણ ઉપલબ્ધ છે. અમારું ટ્રેકલિસ્ટ ઘટક આમાંથી બેનો ઉપયોગ કરે છે, ઘટકડિડમાઉન્ટ અને કોમ્પ્યૂટરડિડઅપડેટ . ઘટકડિડામાઉન્ટ ને કહેવામાં આવે છે કે જ્યારે પ્રતિક્રિયા ઘટક DOM માં ઉપલબ્ધ છે. આ કિસ્સામાં, અમે અમારા ઘટકમાં કેટલાક ડેટા ઍડ કરવા માંગીએ છીએ, તેથી કૉલિંગ setState માં componentDidMount તે કરવા માટે યોગ્ય સમય છે.

જ્યારે અમારા એપ ઘટક વર્તમાન ટ્રાફિક ઇન્ડેક્સ ને અપડેટ કરે છે, તો ટ્રેકલિસ્ટ ઘટકમાં ઘટકડિડઅપડેટ ટ્રેકલિસ્ટ ઘટક નવા ડેટા મેળવવામાં આવે છે. જ્યારે ટ્રેકલિસ્ટ ઘટકને નવા ડેટા મળે છે, ત્યારે અમે ખાતરી કરવા માંગીએ છીએ કે હાલમાં પસંદ કરેલ ટ્રેક અમારા વ્યૂપોર્ટમાં છે, તેથી અમે તે નક્કી કરવા માટે કેટલાક ગણતરીઓ કરીએ છીએ કે હાલમાં પસંદ કરેલા ટ્રેક DOM માં ક્યાં અસ્તિત્વમાં છે અને તેને આમાં દેખાશે ટ્રેક સૂચિ કન્ટેનર જુઓ

  ઘટકડેડઅપડેટ    {જો (આ. activeTrack) {ચાલો topOfTrackList = આ. ટ્રેકલિસ્ટ. scrollTop;ચાલો નીચેઓફટ્રેકલિસ્ટ =આ. ટ્રેકલિસ્ટ. સ્ક્રોલપૉપ + આ. ટ્રેકલિસ્ટ. ક્લાઈન્ટહાઇટ;ચાલો positionOf પસંદ કરેલ = આ સક્રિયટ્રેક ઓફસેટ ટોપ;જો (topOfTrackList> સ્થિતિઓફ પસંદ કરેલ ||નીચે ઓફટ્રેકલિસ્ટ <સ્થિતિઓફ પસંદ કરેલ) {આ. ટ્રેકલિસ્ટ. scrollTop = positionOf પસંદ કરેલ;}}}   

ટ્રેકની સૂચિ દર્શાવી

અમે જાવાસ્ક્રીપ્ટ નકશા ફંક્શનને અમારા અરેરે ટ્રેક પર લુપમાં અને એરેમાં દરેક એલિમેન્ટ માટે ફંક્શનનો ઉપયોગ કરીએ છીએ. આપણે જે ફંક્શન કહીએ છીએ તે રેન્ડર લિસ્ટ આઈટમ છે, જે નક્કી કરવા માટે કેટલાક તર્ક ધરાવે છે કે શું હાલના ટ્રાફિક ઇન્ડેક્સ એ એરેમાંનું વર્તમાન ઘટક છે જે અમે રેન્ડરિંગ કરી રહ્યા છીએ. જો તે છે, તો અમને li પર ક્લાસમેમ માટેના મૂલ્યમાં પસંદ કરેલ સ્ટ્રિંગનો સમાવેશ કરવાની ખાતરી કરવી જરૂરી છે. આ સુનિશ્ચિત કરશે કે બાકીની સૂચિની સરખામણીમાં પસંદ કરેલા ટ્રેક માટે સ્ટાઇલ અલગ હશે.

  રેન્ડર લિસ્ટ આઈટમ (ટ્રેક, આઇ) {ચાલો trackClass = આ. પ્રોપ્સ currentTrackIndex === ટ્રેક. id? "પસંદ કરેલ": "";વળતર ( {જો (આ પ્રોપ્સ. currentTrackIndex === ટ્રેક આઇડી) {આ. activeTrack = કર;}}}onClick = {   => {આ. પ્રોપ્સ selectTrackNumber (ટ્રેક. id)}}>
{ટ્રેક. id}
{ટ્રેક. શીર્ષક}
{ટ્રેક. સમયગાળો}
);}

લિ તત્વમાં અન્ય કેટલીક મહત્વપૂર્ણ વિશેષતાઓ પણ છે:

  • કી : જ્યારે પણ અમારી પાસે સૂચિ હોય, ત્યારે આ લક્ષણને શામેલ કરવાની જરૂર છે જેથી સૂચિ યોગ્ય રીતે રેન્ડર કરશે. પ્રતિક્રિયામાં યાદીઓ સાથે કીઓ વાપરવા વિશે વધુ માહિતી માટે, પ્રતિક્રિયા દસ્તાવેજોમાં આ લેખ તપાસો.

  • ક્લાસમેનમ : ખાતરી કરો કે લી પાસે પસંદ કરેલ વર્ગ સાથે જોડાયેલ છે જો તે વર્તમાનમાં પસંદ કરેલ ટ્રેક છે

  • રેફ : અમે ટ્રૅક સૂચિ કન્ટેનરની યોગ્ય સ્થાનની ગણતરી કરવા માટે રેફ લક્ષણનો ઉપયોગ કરીએ છીએ.આ ગણતરી યોગ્ય રીતે બનાવવા માટે અમને વાસ્તવિક DOM ઘટકને ઍક્સેસ કરવાની જરૂર છે.

  • ઑનક્લિક : જ્યારે વપરાશકર્તા કોઈ ચોક્કસ ટ્રેકનો વિકલ્પ પસંદ કરે છે, ત્યારે આપણે આ કાર્યને કૉલ કરીએ છીએ, જે કોલ કરે છે. પ્રોપ્સ પસંદ કરેલ ટ્રેકનમ્બર આ ફંક્શન અમારા એપ ઘટક નિયંત્રણો ઘટક માટે ક્લિક હેન્ડલરની જેમ ટ્રેકલિસ્ટ ઘટકમાં પસાર થાય છે. જ્યારે આ વિધેય કહેવામાં આવે છે, ત્યારે અમારી એપ્લિકેશનની સ્થિતિ અપડેટ કરવામાં આવે છે, currentTrackIndex સાથે, વપરાશકર્તા પસંદ કરેલા ટ્રૅક નંબર પર સેટ કરી રહ્યું છે.

  પસંદ કરો ટ્રેકનમ્બર (ટ્રેકઆઇડી) {આ. સેટસ્ટેટ ({currentTrackIndex: ટ્રેકઆઇડી, રમતા: સાચું}, આ. playAudio);}   

તેનો પ્રયાસ કરો!

કોડેન ઉદાહરણ તપાસો. આ આલ્બમ કલા ગ્લાસ મીમલ્ટ નામના બેન્ડ દ્વારા આલ્બમમાંથી આવે છે. અમે કાયદેસર રીતે "ગ્લાસ સેમિટ્ટ" સાઉન્ડટ્રેકને સ્ટ્રીમ કરી શકતા નથી, તેથી અમે તેની જગ્યાએ રમવા માટે કેટલાક રોયલ્ટી ફ્રી સંગીત લીધાં છે, જેથી અમે મ્યુઝિક પ્લેયરનો સંપૂર્ણ પ્રભાવ મેળવી શકીએ.

પેન પ્રતિક્રિયા જુઓ દૈનિક યુઆઇ - 009 - કોડપેન પર જેક ઓલિવર (જૅકોલિવેર) દ્વારા સંગીત પ્લેયર.

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

પ્રતિક્રિયા ફંડામેન્ટલ્સમાં ઊંડે ડાઇવ કરવા માંગો છો? ફુલસ્ટેક પ્રતિક્રિયા તપાસો: વધુ જાણવા માટે ReactJS & Semalt માટે પૂર્ણ માર્ગદર્શન.

પ્રતિક્રિયામાં નવું શું છે?પ્રતિક્રિયામાં નવું શું છે? સંબંધિત વિષયો:
ES6 એન્જેલરજેએસનોડ jsTools અને સેમ્યુઅલ
પ્રારંભિક અભ્યાસ માટે શ્રેષ્ઠ માર્ગ
વેસ બોઝ
તમે વાસ્તવિક વિશ્વનું નિર્માણ કરવા માટે એક પગલું દ્વારા પગલું તાલીમ અભ્યાસક્રમ પ્રતિક્રિયા કરો. જેએસ + બપોરે એક દંપતિ માં ફાયરબેઝ એપ્લિકેશનો અને વેબસાઇટ ઘટકો કૂપન કોડનો ઉપયોગ કરો 'SITEPOINT' મેળવવા માટે ચેકઆઉટ પર 25% બંધ .
February 28, 2018