Back to Question Center
0

ਕੀ ਪ੍ਰਤੀਕਰਮ 16 ਵਿੱਚ ਨਵਾਂ ਕੀ ਹੈ?            ਕੀ ਪ੍ਰਤੀਕਰਮ 16 ਵਿਚ ਨਵਾਂ ਹੈ? ਸੰਬੰਧਿਤ ਵਿਸ਼ਾ: ES6AngularJSNode.jsTools & ਮਿਗਲ

1 answers:
ਕੀ ਪ੍ਰਤੀਕਰਮ 16 ਵਿੱਚ ਨਵਾਂ ਕੀ ਹੈ?

ਰੀਐਕਟੇਸ਼ਨ ਦੀ ਉੱਚ-ਗੁਣਵੱਤਾ, ਡੂੰਘਾਈ ਨਾਲ ਜਾਣ ਪਛਾਣ ਲਈ, ਤੁਸੀਂ ਕੈਨੇਡਾ ਦੇ ਪੂਰੇ ਸਟੈਕ ਡਿਵੈਲਪਰ ਵੇਸ ਬੋਸ ਤੋਂ ਪਹਿਲਾਂ ਨਹੀਂ ਜਾ ਸਕਦੇ. ਇੱਥੇ ਆਪਣੇ ਕੋਰਸ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ, ਅਤੇ ਕੋਡ SITEPOINT ਨੂੰ 25% ਬੰਦ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਅਤੇ ਸਾਈਟਪੌਰਟ ਦੀ ਸਹਾਇਤਾ ਕਰਨ ਲਈ ਸਹਾਇਤਾ ਦੀ ਵਰਤੋਂ ਕਰੋ.

ਇਸ ਅਹੁਦੇ 'ਤੇ, ਅਸੀਂ ਸਿਮਟਲ 16.

ਵਿਚ ਕੁੱਝ ਨਵੀਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਇੱਕ ਸੰਗੀਤ ਪਲੇਅਰ ਕਿਵੇਂ ਬਣਾਉਣਾ ਸਿੱਖਾਂਗੇ - pirelli 255 50 16.

ਇਸ ਸੰਗੀਤ ਪਲੇਅਰ ਨੂੰ ਲਾਗੂ ਕਰਨ ਵਿਚ, ਅਸੀਂ ਰੀੈਕਟ ਵਿਚ ਕੁਝ ਬਦਲਾਵਾਂ ਬਾਰੇ ਸਿੱਖਣ ਜਾ ਰਹੇ ਹਾਂ. ਸਿਮਟ ਕੁਝ ਬਦਲਾਵ ਹਨ, ਇਸ ਲਈ ਅਸੀਂ ਉਹਨਾਂ ਸਭ ਨੂੰ ਨਹੀਂ ਢੱਕਾਂਗੇ, ਪਰ ਅਸੀਂ ਉਹਨਾਂ ਨੂੰ ਕਵਰ ਕਰਾਂਗੇ ਮਹੱਤਵਪੂਰਨ ਹੈ ਅਤੇ ਤੁਸੀਂ ਅੱਜ ਲਾਗੂ ਕਰ ਸਕਦੇ ਹੋ.

ਇਸ ਪੋਸਟ ਦਾ ਪੂਰਾ ਸਰੋਤ ਗੀਟਹਬ ਤੇ ਉਪਲਬਧ ਹੈ.

ਐਪ ਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਲਈ, ਕੋਡ ਨੂੰ ਡਾਉਨਲੋਡ ਕਰੋ, ਸੀ ਡੀ ਪ੍ਰੋਜੈਕਟ ਡਾਇਰੈਕਟਰੀ ਅਤੇ ਟਾਈਪ ਵਿੱਚ:

   npm ਇੰਸਟਾਲnpm ਸ਼ੁਰੂਆਤ    

ਰਾਜ ਇੱਕ ਰੀਐਕਟ ਐਪਲੀਕੇਸ਼ਨ

ਸਾਰੇ ਰੀਕਾਰਡ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਜਾਇਦਾਦ ਸਟੇਟ ਸ਼ਾਮਲ ਹੈ ਜੋ ਇਹ ਨਿਸ਼ਚਿਤ ਕਰਦੀ ਹੈ ਕਿ ਕਿਸ ਭਾਗਾਂ (ਅਤੇ ਉਨ੍ਹਾਂ ਹਿੱਸਿਆਂ ਨਾਲ ਸਬੰਧਿਤ ਕੋਈ ਡੇਟਾ) ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ.

ਸਾਡੇ ਸੰਗੀਤ ਖਿਡਾਰੀ ਕੋਲ ਰਾਜ ਦੀ ਜਾਇਦਾਦ ਹੈ ਜਿਸ ਵਿੱਚ ਦੋ ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਸ਼ਾਮਲ ਹੁੰਦੀਆਂ ਹਨ: ਇਕ ਵੈਰੀਏਬਲ, ਜੋ ਦੱਸਦਾ ਹੈ ਕਿ ਕੀ ਖਿਡਾਰੀ ਸੰਗੀਤ ਚਲਾ ਰਿਹਾ ਹੈ - ਖੇਡਣ ਬੂਲੀਅਨ - ਅਤੇ ਇੱਕ ਵੇਰੀਏਬਲ ਜੋ ਟਰੈਕ ਕਰਦਾ ਹੈ ਮੌਜੂਦਾ ਟ੍ਰੈਕ ਦੀ ਸਥਿਤੀ - ਮੌਜੂਦਾਟੈਕ ਇੰਡੈਕਸ ਵੇਰੀਏਬਲ.

     ਇਹ. state = {ਖੇਡਣਾ: ਗਲਤ,currentTrackIndex: 0};    

ਰਾਜ ਕੀ ਹੈ?

ਜਦੋਂ ਅਸੀਂ ਕਿਸੇ ਹਿੱਸੇ ਦੇ ਰਾਜ ਨੂੰ ਕਹਿੰਦੇ ਹਾਂ, ਸਾਡਾ ਮਤਲਬ ਪੰਨਾ ਉੱਤੇ ਭਾਗ ਦੇ ਸੰਕੇਤ ਦਾ ਸਨੈਪਸ਼ਾਟ ਹੈ.

ਰੀੈਕਟ ਦੇ ਹਿੱਸੇ ਆਪਣੀ ਖੁਦ ਦੀ ਸਥਿਤੀ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹਨ, ਜੋ ਅਸੀਂ ਇਸ ਅਹੁਦੇ 'ਤੇ ਇਸਤੇਮਾਲ ਕਰਾਂਗੇ. ਜਦੋਂ ਅਸੀਂ ਇੱਕ ਰੀਕੈਕਟ ਕੰਪੋਨੈਂਟ ਵਿੱਚ ਸਟੇਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਤਾਂ ਕੰਪੋਨੈਂਟ ਨੂੰ ਕਿਹਾ ਜਾਂਦਾ ਹੈ ਸਟੇਟਫਾਇਲ . ਇੱਕ ਠੋਸ ਕੰਪੋਨੈਂਟ ਰਾਜਨੀਤਕ ਹਿੱਸਿਆਂ, ਜਿਵੇਂ ਕਿ ਸਾਡੇ ਮਿਊਜ਼ਿਕ ਪਲੇਅਰ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਇੱਕ ਸਟੇਟ ਸੰਪਤੀ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੀ ਖੁਦ ਦੀ ਸਥਿਤੀ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰ ਸਕਦਾ ਹੈ.

ਜਦੋਂ ਉਪਯੋਗਕਰਤਾ ਨੇ ਪਲੇ , ਰੋਕੋ , ਅਗਲੇ , ਅਤੇ ਪਿਛਲੇ ਬਟਨ ਅਤੇ ਖਿਡਾਰੀ ਦੇ ਟਰੈਕਾਂ ਤੇ ਕਲਿਕ ਕੀਤਾ ਹੈ, ਸਾਡੇ ਕੰਪੋਨੈਂਟ ਇਸ ਦੀ ਮੌਜੂਦਾ ਸਥਿਤੀ ਨੂੰ ਅਪਡੇਟ ਕਰੇਗਾ.

ਪ੍ਰੋਪਸ ਬਨਾਮ ਰਾਜ

ਐਪਲੀਕੇਸ਼ਨਾਂ ਤੇ ਪ੍ਰਤੀਕਿਰਿਆ ਲਈ, ਪ੍ਰੋਪ ਅਤੇ ਸਟੇਟ ਵਿਚਾਲੇ ਫਰਕ ਨੂੰ ਸਮਝਣਾ ਜ਼ਰੂਰੀ ਹੈ. ਸਾਡੇ ਸੰਗੀਤ ਪਲੇਅਰ ਦੇ ਕੋਲ ਦੋ ਰਾਜ ਵੈਰੀਏਬਲ ਹਨ ਜੋ ਨਿਰਧਾਰਤ ਸਮੇਂ ਤੇ ਸਾਡੀ ਦਰਖਾਸਤ ਨੂੰ ਕਿਵੇਂ ਨਿਰਧਾਰਿਤ ਕਰਦੇ ਹਨ. ਐਪ ਕੰਪੋਨੈਂਟ ਸਾਡਾ ਮੁੱਖ ਹਿੱਸਾ ਹੈ ਜੋ ਸਾਡੇ ਬੱਚੇ ਦੇ ਭਾਗਾਂ ਨੂੰ ਡਿਸਪਲੇ ਕਰਦਾ ਹੈ- ਨਿਯੰਤਰਣ ਕੰਪੋਨੈਂਟ ਅਤੇ ਟ੍ਰੈਕਲਾਈਸਟ ਭਾਗ. ਇਨ੍ਹਾਂ ਦੋਹਾਂ ਹਿੱਸਿਆਂ ਦੀ ਸਾਡੀ ਅਰਜ਼ੀ ਦੀ ਹਾਲਤ ਬਾਰੇ ਜਾਣਕਾਰੀ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ, ਐਪ ਕੰਪੋਨੈਂਟ ਬੱਚਿਆਂ ਦੇ ਭਾਗਾਂ ਦੀ ਜਾਣਕਾਰੀ ਦੇ ਰੂਪ ਵਿੱਚ ਜਾਣਕਾਰੀ ਪ੍ਰਦਾਨ ਕਰੇਗਾ. ਇਹਨਾਂ ਪ੍ਰਤੀਸਪਰਤਾਂ ਨੂੰ ਫਿਰ ਬੱਚੇ ਦੇ ਅਨੁਪਾਤ ਵਿੱਚ ਆਪਣੇ ਕਾਰਜ ਦੇ ਟੁਕੜਿਆਂ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ. ਇਕ ਹੋਰ ਮਹੱਤਵਪੂਰਣ ਗੱਲ ਸਮਝਣ ਵਾਲੀ ਗੱਲ ਇਹ ਹੈ ਕਿ ਜਦੋਂ ਅਸੀਂ ਐਪ ਕੰਪੋਨੈਂਟ ਅਪਡੇਟ ਕਰਦੇ ਹਾਂ, ਸਾਡਾ ਕੰਟ੍ਰੋਲਸ ਕੰਪੋਨੈਂਟ ਅਤੇ ਟ੍ਰੈਕਲਿਸਟ ਕੰਪੋਨੈਂਟ ਨੂੰ ਵੀ ਅਪਡੇਟ ਕੀਤਾ ਜਾਵੇਗਾ, ਕਿਉਂਕਿ ਉਹ ਇਸ ਬਾਰੇ ਜਾਣਕਾਰੀ 'ਤੇ ਭਰੋਸਾ ਕਰਦੇ ਹਨ. ਐਪ ਕੰਪੋਨੈਂਟ.

ਨਿਯੰਤ੍ਰਣ

ਸਾਡਾ ਨਿਯੰਤਰਣ ਭਾਗ ਸਾਡੀ ਐਪ ਭਾਗ ਦਾ ਪਹਿਲਾ ਬੱਚਾ ਹੈ. ਨਿਯੰਤ੍ਰਣ ਕੰਪੋਨੈਂਟ ਨੂੰ ਦੋ ਪ੍ਰੋਪਿਕਸ ਦਿੱਤੇ ਗਏ ਹਨ: ਔਨਕਲਿਕ ਅਤੇ ਖੇਡਣਾ . ਔਨਕਲਿਕ ਸਪੌਟ ਸਾਨੂੰ ਕੰਟਰੋਲਲ ਭਾਗ ਨੂੰ ਐਪ ਭਾਗ ਵਿੱਚ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤੇ ਗਏ our handleClick ਫੰਕਸ਼ਨ ਨੂੰ ਪਾਸ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ. ਜਦੋਂ ਵਰਤੋਂਕਾਰ ਸਾਡੇ ਕੰਟਰੋਲਜ਼ ਹਿੱਸੇ ਵਿਚਲੇ ਇੱਕ ਬਟਨ ਤੇ ਕਲਿਕ ਕਰਦਾ ਹੈ, ਤਾਂ ਹੈਂਡਲਕਲਿਕ ਫੰਕਸ਼ਨ ਨੂੰ ਕਿਹਾ ਜਾਵੇਗਾ.

ਆਉ ਵੇਖੀਏ ਕਿ ਅਸੀਂ ਆਪਣੇ ਬਟਨ ਕਿਵੇਂ ਪੇਸ਼ ਕਰਦੇ ਹਾਂ ਅਤੇ ਸਾਡੇ ਕੰਟ੍ਰੋਲਸ ਭਾਗ ਵਿੱਚ ਕਲਿੱਕਾਂ ਨੂੰ ਕਿਵੇਂ ਚਲਾਉਂਦੇ ਹਾਂ.

ਸਾਡੇ ਕੰਟਰੋਲਜ਼ ਭਾਗ ਵਿੱਚ ਸਾਡੇ ਕੋਲ ਤਿੰਨ ਮਹੱਤਵਪੂਰਣ ਬਟਨ ਹਨ:

  1. << (ਪਿਛਲਾ) ਬਟਨ - ਇੱਕ ਤੀਰ ਆਈਕਾਨ ਜੋ ਖੱਬੇ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰਦਾ ਹੈ - ਜੋ ਸੂਚੀ ਵਿੱਚ ਪਿਛਲਾ ਟ੍ਰੈਕ ਚੁਣਦਾ ਹੈ
  2. ਪਲੇਅ / ਰੋਕੋ ਬਟਨ ਜੋ ਸੰਗੀਤ ਚਲਾਉਂਦਾ ਹੈ ਅਤੇ ਰੁਕਦਾ ਹੈ
  3. >> (ਅਗਲੇ) ਬਟਨ - ਸੱਜੇ ਪਾਸੇ ਵੱਲ ਇਸ਼ਾਰਾ ਇੱਕ ਤੀਰ ਆਈਕੋਨ - ਜੋ ਸੂਚੀ ਵਿੱਚ ਅਗਲਾ ਟ੍ਰੈਕ ਚੁਣਦਾ ਹੈ.

ਜਦੋਂ ਇਹਨਾਂ ਵਿੱਚੋਂ ਹਰ ਇੱਕ ਬਟਨ ਨੂੰ ਦਬਾਇਆ ਜਾਂਦਾ ਹੈ, ਅਸੀਂ ਕਲਿੱਕ ਹੈਂਡਲਰ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰਦੇ ਹਾਂ ਜੋ ਅਸੀਂ ਐਪ ਭਾਗ ਤੋਂ ਪਾਸ ਕੀਤੀ ਸੀ. ਸਾਡੇ ਸੰਗੀਤ ਪਲੇਅਰ ਐਪਲੀਕੇਸ਼ਨ ਦੇ ਹਰੇਕ ਬਟਨ ਵਿੱਚ ਇੱਕ ਆਈਡੀ ਹੈ, ਜੋ ਸਾਨੂੰ ਇਹ ਨਿਰਧਾਰਤ ਕਰਨ ਵਿੱਚ ਸਹਾਇਤਾ ਕਰੇਗਾ ਕਿ ਇੱਕ ਖਾਸ ਕਲਿੱਕ ਦਾ ਪ੍ਰਬੰਧ ਕਿਵੇਂ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ.

ਹੈਂਡਲਕਲਿਕ ਫੰਕਸ਼ਨ ਦੇ ਅੰਦਰੂਨੀ ਹਿੱਸੇ ਵਿਚ, ਅਸੀਂ ਸਵਿਚ ਸਟੇਟਮੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ ਜੋ ਕਿ ਬਟਨ ਦੇ ਆਈਡੀ ਇਸਤੇਮਾਲ ਕਰਦਾ ਹੈ - e. ਟੀਚਾ ID ਤੋਂ ਇਹ ਪਤਾ ਕਰਨ ਲਈ ਕਿ ਬਟਨ ਤੋਂ ਕਾਰਵਾਈ ਨੂੰ ਕਿਵੇਂ ਵਰਤਿਆ ਜਾਵੇ. ਅਗਲੇ ਭਾਗ ਵਿੱਚ, ਅਸੀਂ ਦੇਖਾਂਗੇ ਕਿ ਸਵਿੱਚ ਸਟੇਟਮੈਂਟ ਦੇ ਹਰੇਕ ਕੇਸ ਵਿੱਚ ਕੀ ਹੁੰਦਾ ਹੈ.

ਪਲੇ ਬਟਨ

ਜਦੋਂ ਪਲੇਅ ਬਟਨ ਕਲਿੱਕ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਸਾਨੂੰ ਸਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਦੇ ਕੁੱਝ ਹਿੱਸਿਆਂ ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੋਏਗੀ. ਸਾਨੂੰ ਪਲੇ ਆਈਕਾਨ ਨੂੰ ਵਿਰਾਮ ਆਈਕੋਨ ਤੇ ਬਦਲਣ ਦੀ ਜ਼ਰੂਰਤ ਹੋਏਗੀ. ਸਾਨੂੰ ਮੌਜੂਦਾ ਮੌਜੂਦਾ ਟ੍ਰੈਕਇੰਡੈਕਸ ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੋਏਗੀ ਜੇ ਇਹ ਵਰਤਮਾਨ ਵਿੱਚ 0 ਤੇ ਨਿਰਭਰ ਹੈ. ਸਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਦੇ ਇਹਨਾਂ ਦੋ ਹਿੱਸਿਆਂ ਨੂੰ ਬਦਲਣ ਦੇ ਲਈ, ਅਸੀਂ ਸੈਟਸਟੇਟ ਨੂੰ ਇੱਕ ਫੰਕਸ਼ਨ ਹਰ ਇੱਕ ਲਈ ਉਪਲਬਧ ਕਰਾਂਗੇ ਕੰਪੋਨੈਂਟ ਤੇ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰੋ.

ਇਹ ਸੈੱਟਸਟੇਟ ਫੰਕਸ਼ਨ ਸਾਰੇ ਹਿੱਸੇ ਦੇ ਪ੍ਰਤੀਕਿਰਿਆ ਲਈ ਉਪਲਬਧ ਹੈ, ਅਤੇ ਇਹ ਇਸ ਤਰ੍ਹਾਂ ਹੈ ਕਿ ਅਸੀਂ ਆਪਣੇ ਸੰਗੀਤ ਪਲੇਅਰ ਦੀ ਸਥਿਤੀ ਨੂੰ ਕਿਵੇਂ ਅਪਡੇਟ ਕਰਦੇ ਹਾਂ. ਸੈਟਸਟੇਟ ਫੰਕਸ਼ਨ ਵਿੱਚ ਪਹਿਲੀ ਆਰਗੂਮੈਂਟ ਕੋਈ ਇਕਾਈ ਜਾਂ ਫੰਕਸ਼ਨ ਹੋ ਸਕਦਾ ਹੈ. ਜੇ ਅਸੀਂ ਅਗਲੇ ਰਾਜ ਦੀ ਗਣਨਾ ਕਰਨ ਲਈ ਅਰਜ਼ੀ ਦੀ ਮੌਜੂਦਾ ਸਥਿਤੀ 'ਤੇ ਭਰੋਸਾ ਨਹੀਂ ਕਰ ਰਹੇ, ਤਾਂ ਇਕ ਆਰਗਮੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰਦਿਆਂ ਪਹਿਲੀ ਦਲੀਲ ਬਿਲਕੁਲ ਸਹੀ ਢੰਗ ਹੈ ਅਤੇ ਇਸ ਤਰ੍ਹਾਂ ਦਿੱਸਦਾ ਹੈ: ਇਹ. setState ({currentState: 'newState'}) . ਸਾਡੇ ਕੇਸ ਵਿੱਚ, ਅਸੀਂ ਸਾਡੀ ਅਰਜ਼ੀ ਦੀ ਅਗਲੀ ਸਥਿਤੀ ਦਾ ਪਤਾ ਕਰਨ ਲਈ ਅਰਜ਼ੀ ਦੀ ਮੌਜੂਦਾ ਸਥਿਤੀ 'ਤੇ ਭਰੋਸਾ ਕਰ ਰਹੇ ਹਾਂ, ਇਸ ਲਈ ਅਸੀਂ ਇੱਕ ਫੰਕਸ਼ਨ ਨੂੰ ਵਰਤਣਾ ਚਾਹੁੰਦੇ ਹਾਂ. ਠੋਸ ਦਸਤਾਵੇਜ਼ ਦਸਦਾ ਹੈ ਕਿ ਇਹ ਮਹੱਤਵਪੂਰਣ ਕਿਉਂ ਹੈ:

ਰੀਕੈਕਟ ਕਈ ਬੈਚ ਬੈਠੇ ਹੋ ਸਕਦੇ ਹਨ setState ਕਾਰਗੁਜ਼ਾਰੀ ਲਈ ਇੱਕ ਸਿੰਗਲ ਅਪਡੇਟ ਵਿੱਚ ਕਾਲ ਕਰੋ ਕਿਉਂਕਿ ਇਹ. ਪਰੋਪ ਅਤੇ ਇਹ. ਰਾਜ ਨੂੰ ਅਸੈਕਰੋਨੌਨਸ ਤੌਰ ਤੇ ਅਪਡੇਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਤੁਹਾਨੂੰ ਅਗਲੀ ਅਵਸਥਾ ਦੀ ਗਣਨਾ ਕਰਨ ਲਈ ਉਹਨਾਂ ਦੇ ਮੁੱਲਾਂ ਤੇ ਨਿਰਭਰ ਨਹੀਂ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ.

ਮੀਡਮ 16 ਦੇ ਰੂਪ ਵਿੱਚ ਇਸਦੇ ਹੋਰ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ (ਅਸਿੰਕਰੋਨਸ ਰੈਂਡਰਿੰਗ ਸਮੇਤ) ਨੂੰ ਚਾਲੂ ਕਰਨ ਨਾਲ, ਇਹ ਅੰਤਰ ਸਮਝਣ ਲਈ ਵਧੇਰੇ ਮਹੱਤਵਪੂਰਨ ਹੋ ਜਾਵੇਗਾ.

ਜਦੋਂ ਪਲੇਅਬ ਬਟਨ ਦਬਾ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ ਅਤੇ ਅਸੀਂ ਸੈਟਸਟੇਟ ਕਾਲ ਕਰਦੇ ਹਾਂ ਤਾਂ ਅਸੀਂ ਇਕ ਫੰਕਸ਼ਨ ਕਰਦੇ ਹਾਂ, ਕਿਉਂਕਿ ਅਸੀਂ ਵਰਤਮਾਨ ਮੌਜੂਦਾ ਟਰੈਫਿਕ ਇੰਡੈਕਸ ਸਟੇਟ ਵੈਰੀਏਬਲ ਦੇ ਮੌਜੂਦਾ ਮੁੱਲ 'ਤੇ ਭਰੋਸਾ ਰੱਖਦੇ ਹਾਂ. ਫੰਕਸ਼ਨ ਵਿੱਚ ਪਾਸ ਕੀਤੀ ਪਹਿਲੀ ਦਲੀਲ ਸਾਡੀ ਅਰਜ਼ੀ ਦੀ ਪਿਛਲੀ ਅਵਸਥਾ ਹੈ, ਅਤੇ ਦੂਜੀ ਆਰਗੂਮੈਂਟ ਮੌਜੂਦਾ ਹੈ ਪ੍ਰੋਪਸ . ਸਾਡੇ ਕੇਸ ਵਿੱਚ, ਸਾਨੂੰ ਅਗਲੇ ਰਾਜ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਅਰਜ਼ੀ ਦੀ ਪਿਛਲੀ ਸਥਿਤੀ ਦੀ ਲੋੜ ਹੈ:

     ਕੇਸ "ਖੇਡਣਾ":ਇਹ. setState ((ਰਾਜ, ਸੁਝਾਅ) => {currentTrackIndex = ਹਾਲਤ ਦਿਉ. currentTrackIndex;ਜੇ (ਮੌਜੂਦਾਟੈਕ ਇੰਡੈਕਸ === 0) {currentTrackIndex = 1;}    

ਜਦੋਂ ਅਸੀਂ ਮੌਜੂਦਾ ਟਰੇਕ ਇੰਡੈਕਸ ਦੇ ਪਿਛਲੀ ਮੁੱਲ ਦੇ ਆਧਾਰ ਤੇ ਮੌਜੂਦਾ ਟਾਕਰੇਇੰਡੈਕਸ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਸੈਟ ਕੀਤਾ ਹੈ, ਤਾਂ ਅਸੀਂ ਉਹਨਾਂ ਵਸਤੂਆਂ ਦਾ ਇਕ ਆਸ਼ਾ ਵਾਪਸ ਕਰਦੇ ਹਾਂ ਜੋ ਅਸੀਂ ਅੱਪਡੇਟ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ. ਖੇਡਣ ਦੇ ਬਟਨ ਤੇ ਕਲਿਕ ਕਰਨ ਸਮੇਂ, ਅਸੀਂ ਬੂਲੀਅਨ ਨੂੰ ਸਹੀ ਪਲੇਅਜ਼ ਕਰਦੇ ਹਾਂ ਅਤੇ ਮੌਜੂਦਾ ਟਰੇਕ ਇੰਡੇਕ ਦੇ ਮੁੱਲ ਨੂੰ ਸੈਟ ਕਰਦੇ ਹਾਂ:

     ਵਾਪਸੀ {ਖੇਡਣਾ: ਸੱਚਾ,currentTrackIndex: currentTrackIndex};    

ਦੂਜੀ ਦਲੀਲ ਜੋ ਕਿ ਸੈਟਸਟੇਟ ਫੰਕਸ਼ਨ ਵਿੱਚ ਪਾਸ ਕੀਤੀ ਗਈ ਹੈ ਇੱਕ ਕਾਲਬੈਕ ਫੰਕਸ਼ਨ ਹੈ ਜਿਸ ਨੂੰ ਸੈੱਟਸਟੇਟ ਫੰਕਸ਼ਨ ਪੂਰਾ ਹੋਣ ਤੋਂ ਬਾਅਦ ਕਿਹਾ ਜਾਂਦਾ ਹੈ. ਅਸੀਂ ਇਸ ਵਿੱਚ ਪਾਸ ਹਾਂ. playAudio ਸਾਡੇ ਸੈੱਟਸਟੇਟ ਫੰਕਸ਼ਨ ਲਈ ਦੂਜੀ ਦਲੀਲ ਦੇ ਤੌਰ ਤੇ ਫੰਕਸ਼ਨ.

    }, ਇਹ. playAudio);    

ਜਦੋਂ ਪਲੇ ਔਡੀਓ ਬਟਨ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਅਸੀਂ ਆਡੀਓ ਟੈਗ ਦਾ ਹਵਾਲਾ ਦਿੰਦੇ ਹਾਂ ਅਤੇ ਲੋਡ ਅਤੇ ਪਲੇ ਗੇਮਾਂ ਨੂੰ ਸਾਡੇ ਦੁਆਰਾ ਉਪਲਬਧ ਹਨ. ਵੈਬ ਔਡੀਓ API.

     ਪਲੇ ਔਡੀਓ    {ਇਹ. audioElement. ਲੋਡ   ;ਇਹ. audioElement. ਪਲੇ ਕਰੋ   ;}    

ਰੈਫ ਨੂੰ ਇੱਕ DOM ਐਲੀਮੈਂਟ

ਆਡੀਓ ਚਲਾਉਣ ਲਈ ਅਸਲੀ ਆਡੀਓ DOM ਤੱਤ ਦਾ ਹਵਾਲਾ ਦੇਣ ਲਈ, ਸਾਨੂੰ ਸਾਰੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਪ੍ਰਤੀਕਿਰਿਆ ਲਈ ਵਿਸ਼ੇਸ਼ ਵਿਸ਼ੇਸ਼ਤਾ ਵਰਤਣ ਦੀ ਜ਼ਰੂਰਤ ਹੋਏਗੀ, ਰੈਫ ਗੁਣ. ਪ੍ਰਤਿਕਿਰਿਆ ਦਸਤਾਵੇਜ਼ਾਂ ਤੋਂ:

ਜਦੋਂ ਰਿਫ ਐਟਰੀਬਿਊਟ ਨੂੰ ਇੱਕ HTML ਐਲੀਮੈਂਟ ਤੇ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਰਿਫੰਡ ਕਾਲਬੈਕ ਆਪਣੇ ਦਲੀਲ ਦੇ ਰੂਪ ਵਿੱਚ ਅੰਡਰਲਾਈੰਗ DOM ਐਲੀਮੈਂਟ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ.

ਸਾਡੀ ਸਥਿਤੀ ਵਿਚ, ਅਸੀਂ ਆਪਣੇ ਆਡੀਓ DOM ਤੱਤ ਰੈਫ਼ ਗੁਣ ਨੂੰ ਜੋੜਦੇ ਹਾਂ, ਅਤੇ ਇਹ ਸਾਨੂੰ ਹਰੇਕ ਟਰੈਕ ਲਈ ਔਡੀਓ ਚਲਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ:

     <ਆਡੀਓ ਰਿਫ = {(ਆਡੀਓ) => {ਇਹ. audioElement = audio}} src = {"/ ਗਾਣੇ" "+ ਇਹ ਰਾਜ currentTrackIndex + ". mp3"} />    

ਰੋਕੋ ਬਟਨ

ਜਦ ਰੋਕੋ ਬਟਨ ਦਬਾ ਦਿੱਤਾ ਗਿਆ ਹੈ, ਅਸੀਂ ਇਸ ਨੂੰ ਕਹਿੰਦੇ ਹਾਂ. ਸੈੱਟ ਸਟੇਟ ਅਤੇ ਸਾਡੇ ਖੇਡਣ ਬੂਲੀਅਨ ਝੂਠੇ ਨੂੰ ਸੈਟ ਕਰਦੇ ਹਾਂ.

     ਕੇਸ "ਰੋਕੋ":ਇਹ. setState ({playing: false}, ਇਹ. pauseAudio);ਤੋੜ    

ਸਾਡੇ ਸੈਟਸਟੇਟ ਫੰਕਸ਼ਨ ਕਾਲ ਲਈ ਦੂਜੀ ਦਲੀਲ ਇਹ ਹੈ ਕਿ ਅਸੀਂ ਇਹ pauseAudio ਫੰਕਸ਼ਨ, ਜੋ ਆਡੀਓ ਤੱਤ ਦਾ ਹਵਾਲਾ ਦਿੰਦਾ ਹੈ ਅਤੇ ਰੋਕੋ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰਦਾ ਹੈ.

     ਵਿਰਾਮ ਆਡੀਓ    {ਇਹ. audioElement. ਰੋਕੋ   ;}    

<< (ਪਿਛਲੇ) ਬਟਨ

ਜਦੋਂ << ਆਈਕੋਨ ਤੇ ਕਲਿੱਕ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਪਿਛਲੀ ਬੁੱਕ ਦੇ ਆਈਡੀ ਸਵਿਚ ਸਟੇਟਮੈਂਟ ਦੇ "ਪਿਛਲਾ" ਕੇਸ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ, ਇਸ ਲਈ "ਪਿਛਲਾ" ਕੇਸ ਨਾਲ ਜੁੜਿਆ ਕੋਡ ਨੂੰ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ. "ਪਿਛਲੇ" ਕੇਸ ਵਿਚ, ਅਸੀਂ ਇਸ ਨੂੰ ਕਾਲ ਕਰਦੇ ਹਾਂ. setState ਇਕ ਫੰਕਸ਼ਨ ਨਾਲ ਫਿਰ ਤੋਂ ਜਿਵੇਂ ਅਸੀਂ ਖੇਡਣ ਅਤੇ ਸਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਰੋਕਣ ਲਈ ਕੀਤਾ. ਇਸ ਵਾਰ, ਅਸੀਂ ਮੁੱਲ ਨੂੰ ਘਟਾਉਣ ਅਤੇ ਮੌਜੂਦਾ ਵਸਤੂ ਨੂੰ ਵਾਪਸ ਕਰਨ ਲਈ ਮੌਜੂਦਾ ਟਰੇਕ ਇੰਡੈਕਸ ਨਵੇਂ ਮੁੱਲ ਨੂੰ ਵਾਪਸ ਕਰਨ ਲਈ ਮੌਜੂਦਾ ਟਰੇਕ ਇੰਡੈਕਸ ਦਾ ਪਿਛਲਾ ਮੁੱਲ ਵਰਤਦੇ ਹਾਂ.

     ਕੇਸ "prev":ਇਹ. setState ((ਰਾਜ, ਸੁਝਾਅ) => {let currentIndex = state currentTrackIndex - 1;ਜੇ (ਮੌਜੂਦਾ ਮੁੱਲ <= 0) {ਵਾਪਸੀ ਨਾਵਲ;} else {ਵਾਪਸੀ {ਖੇਡਣ: ਸੱਚਾ, ਮੌਜੂਦਾਟਰੇਕਇੰਡੈਕਸ: ਮੌਜੂਦਾਇੰਡੈਕਸ};}}, ਇਹ. playAudio);    

ਰਿਟਰਨਿੰਗ ਨੱਲ ਤੋਂ ਸੈੱਟਸਟੇਟ

ਰੀਕਾਰਟ 16 ਵਿਚਲੇ ਇਕ ਨਵੇਂ ਬਦਲਾਅ ਵਿਚ ਇਹ ਹੈ ਕਿ ਜਦ ਅਸੀਂ ਸੈਟਸਟੇਟ ਫੰਕਸ਼ਨ ਤੋਂ ਵਾਪਸ ਨੱਲ ਕਰਦੇ ਹਾਂ, ਤਾਂ ਸਾਡੀ ਅਰਜ਼ੀ ਦੁਬਾਰਾ ਪੇਸ਼ ਨਹੀਂ ਕੀਤੀ ਜਾਵੇਗੀ. ਸਾਡੀ ਟਰੈਕ ਸੂਚੀ ਵਿਚ 11 ਟ੍ਰੈਕ ਉਪਲਬਧ ਹਨ. ਜੇਕਰ ਉਪਭੋਗਤਾ << ਬਟਨ ਤੇ ਕਲਿਕ ਕਰਨਾ ਜਾਰੀ ਰੱਖ ਰਿਹਾ ਹੈ, ਤਾਂ ਮੌਜੂਦਾਟੈਕਇੰਡੇਐਕਸ ਜਦੋਂ ਤੱਕ 0 ਤੱਕ ਨਹੀਂ ਪਹੁੰਚਦਾ ਹੈ ਤਾਂ ਘਟਾਏ ਜਾਣਗੇ. ਇੱਕ ਵਾਰ ਇਹ 0 ਤੱਕ ਪਹੁੰਚਦਾ ਹੈ, ਅਸੀਂ ਹੁਣ ਮੌਜੂਦਾ ਟਾਰਿਕਡੈਕਸ ਨੂੰ ਘਟਾਉਣਾ ਨਹੀਂ ਚਾਹੁੰਦੇ ਅਤੇ ਸਾਨੂੰ ਹੁਣ ਸਾਡੀ ਅਰਜ਼ੀ ਨੂੰ ਦੁਬਾਰਾ ਪੇਸ਼ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਪੈਂਦੀ. ਅਸੀਂ ਵੀ ਉਹੀ ਕਰਦੇ ਹਾਂ ਜਦੋਂ ਸਾਡੇ >> ਆਈਕਨ ਨੂੰ ਕਲਿੱਕ ਕੀਤਾ ਜਾਂਦਾ ਹੈ. ਜੇ ਮੌਜੂਦਾਟੈਕਇੰਡੇਐਕਸ ਸਾਡੀ ਸੂਚੀ ਵਿਚਲੇ ਟ੍ਰੈਕਾਂ ਦੀ ਗਿਣਤੀ ਦੇ ਬਰਾਬਰ (ਜਾਂ ਇਸ ਤੋਂ ਵੱਡੀ) ਹੈ, ਤਾਂ ਅਸੀਂ ਨੱਲ ਤੋਂ ਸੈਟਸਟੇਟ ਵਾਪਸ ਆਉਂਦੇ ਹਾਂ.

>> (ਅਗਲੇ) ਬਟਨ

ਜਦੋਂ >> ਬਟਨ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ, ਸਾਡੇ ਕੋਲ ਇਕੋ ਜਿਹੀ ਕਾਰਜਸ਼ੀਲਤਾ << ਬਟਨ ਦੇ ਤੌਰ ਤੇ ਹੈ. ਹਰ ਵਾਰ ਜਦੋਂ ਉਪਭੋਗਤਾ >> ਤੇ ਕਲਿਕ ਕਰਦਾ ਹੈ, ਤਾਂ ਅਸੀਂ ਮੌਜੂਦਾਟਰੇਕਇੰਡੈਕਸ ਨੂੰ ਵਧਾਉਂਦੇ ਹਾਂ ਅਤੇ ਅਸੀਂ ਜਾਂਚ ਕਰਦੇ ਹਾਂ ਕਿ ਮੌਜੂਦਾਟੈਕਇੰਡੇਐਕਸ ਟਰੈਕ ਸੂਚੀ ਦੀ ਲੰਬਾਈ ਤੋਂ ਜ਼ਿਆਦਾ ਨਹੀਂ ਹੈ. ਜੇ ਇਹ ਹੈ, ਤਾਂ ਅਸੀਂ ਸੈਟਸਟੇਟ ਫੰਕਸ਼ਨ ਕਾਲ ਵਿਚ ਵਾਪਸ ਨੱਲ ਵਾਪਸ ਆਉਂਦੇ ਹਾਂ.

     ਕੇਸ "ਅਗਲਾ":ਇਹ. setState ((ਰਾਜ, ਸੁਝਾਅ) => {let currentIndex = state currentTrackIndex + 1;ਜੇ (ਮੌਜੂਦਾਇੰਡੈਕਸ> ਡਾਟਾ. ਟਰੈਕ). playAudio);ਤੋੜ    

ਸਿਫਾਰਸ਼ੀ ਕੋਰਸ

ਟ੍ਰੈਕ ਸੂਚੀ

ਇਸ ਪੋਸਟ ਦੇ ਸੰਕਲਪਾਂ ਨੂੰ ਸਮਝਣ ਵਿਚ ਅਸਾਨੀ ਨਾਲ ਅਸੀਂ JSON ਫਾਈਲ ਵਿਚ ਟ੍ਰੈਕ ਸੂਚੀ ਡੇਟਾ ਨੂੰ ਸਖ਼ਤ ਨਾਲ ਕੋਡਬੱਧ ਕੀਤਾ ਹੈ. ਅਸੀਂ ਸਿਖਰ ਤੇ JSON ਫਾਈਲ ਦੇ ਡੇਟਾ ਨੂੰ ਆਯਾਤ ਕਰਦੇ ਹਾਂ, ਅਤੇ ਸਾਡੀ ਜੀਵਨਸ਼ੀਲ ਵਿਧੀ componentDidMount ਵਿੱਚ, ਅਸੀਂ ਆਪਣੀ ਟ੍ਰੈਕਲਾਈਸਟ ਭਾਗ ਦੀ ਸਥਿਤੀ ਨੂੰ ਸੈਟ ਕਰਦੇ ਹਾਂ. ਸਾਡੀ ਟ੍ਰੈਕਲਾਈਸਟ ਭਾਗ ਦੀ ਸਥਿਤੀ ਵਿੱਚ ਇੱਕ ਵੇਰੀਏਬਲ, ਟ੍ਰੈਕਸ ਵੇਰੀਏਬਲ ਸ਼ਾਮਲ ਹਨ.

ਲਾਈਫਸੀਲ ਵਿਧੀਵਾਂ ਕੰਪੋਨੈਂਟਡਿਡਮਾਂਟ ਅਤੇ ਕੰਪੋਨੈਂਟ ਡਿਡ ਅਪਡੇਟ

ਹਰੇਕ ਪ੍ਰਤੀਕਰਮ ਕੰਪੋਨੈਂਟ, ਸੈੱਟਸਟੇਟ ਫੰਕਸ਼ਨ ਤੋਂ ਇਲਾਵਾ, ਕੋਲ ਲਾਈਸਾਇਕਲ ਢੰਗ ਵੀ ਉਪਲਬਧ ਹਨ. ਸਾਡਾ ਟ੍ਰੈਕ-ਲਿਸਟ ਕੰਪੋਨੈਂਟ ਇਹਨਾਂ ਵਿਚੋਂ ਦੋ ਵਰਤਦਾ ਹੈ, ਕੰਪੋਨੈਂਟਡਿਡਮਾਂਟ ਅਤੇ ਕੰਪੋਨੈਂਟ ਡਿਡਅੱਪਡੇਟ . componentDidMount ਨੂੰ ਕਿਹਾ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਡੀ.ਓ.ਐਮ. ਵਿਚ ਰਿਐਕਟ ਭਾਗ ਉਪਲਬਧ ਹੈ. ਇਸ ਕੇਸ ਵਿੱਚ, ਅਸੀਂ ਆਪਣੇ ਡੇਟਾ ਵਿੱਚ ਕੁਝ ਡੇਟਾ ਜੋੜਨਾ ਚਾਹੁੰਦੇ ਹਾਂ, ਇਸ ਲਈ ਇਸਨੂੰ ਕਾਲਿੰਗ setState ਵਿੱਚ componentDidMount ਅਜਿਹਾ ਕਰਨ ਦਾ ਸਹੀ ਸਮਾਂ ਹੈ.

ਜਦੋਂ ਸਾਡੇ ਐਪ ਕੰਪੋਨੈਂਟ ਨੇ ਮੌਜੂਦਾ ਟਰੇਕ ਇੰਡੈਕਸ , ਟ੍ਰੈਕਐਲੈਕਟ ਭਾਗ ਦੇ ਕੰਪੋਨੈਂਟ ਡਿਡ ਅਪਡੇਟ ਟਰੈਕਲਿਸਟ ਭਾਗ ਨੂੰ ਨਵੇਂ ਡਾਟਾ ਮਿਲ ਰਿਹਾ ਹੈ. ਜਦੋਂ ਟ੍ਰੈਕਲਿਸਟ ਕੰਪੋਨੈਂਟ ਨੂੰ ਨਵਾਂ ਡਾਟਾ ਮਿਲਦਾ ਹੈ, ਤਾਂ ਅਸੀਂ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹਾਂ ਕਿ ਮੌਜੂਦਾ ਚੁਣਿਆ ਟਰੈਕ ਸਾਡੇ ਵਿਊਪੋਰਟ ਵਿਚ ਹੈ, ਇਸ ਲਈ ਅਸੀਂ ਇਹ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਕੁਝ ਗਣਨਾ ਕਰਾਂਗੇ ਕਿ ਮੌਜੂਦਾ ਚੁਣੀ ਗਈ ਟਰੈਕ DOM ਵਿਚ ਕਿੱਥੇ ਹੈ ਅਤੇ ਇਸਨੂੰ ਇਸ ਵਿਚ ਦਰਸਾਉਂਦੇ ਹਨ. ਟਰੈਕ ਸੂਚੀ ਕੰਟੇਨਰ ਦਾ ਦ੍ਰਿਸ਼

     componentDidUpdate    {ਜੇ (ਇਹ. activeTrack) {topOfTrackList = ਇਸ ਨੂੰ ਛੱਡੋ ਟਰੈਕ ਸੂਚੀ scrollTop;ਥੱਲੇ ਤਲਓਫ੍ਰੈਕਲਿਸਟ =ਇਹ. ਟਰੈਕ ਸੂਚੀ scrollTop + ਇਹ ਟਰੈਕ ਸੂਚੀ clientHeight;ਸਥਿਤੀ ਨੂੰ ਛੱਡੋ = ਚੁਣੋ activeTrack offsetTop;ਜੇ (topOfTrackList> ਸਥਿਤੀਆਪ ਚੋਣ ਕੀਤੀ ||bottomOfTrackList <ਸਥਿਤੀਆਫ ਚੋਣ) {ਇਹ. ਟਰੈਕ ਸੂਚੀ scrollTop = ਸਥਿਤੀਆਪ ਚੋਣ ਕੀਤੀ ਗਈ;}}}    

ਟ੍ਰੈਕਾਂ ਦੀ ਸੂਚੀ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ

ਅਸੀਂ JavaScript ਮੈਪ ਫੰਕਸ਼ਨ ਨੂੰ ਸਾਡੀ ਐਰੇ ਆਫ ਟਰੈਕ ਤੇ ਵਰਤਦੇ ਹਾਂ ਅਤੇ ਐਰੇ ਵਿਚ ਹਰੇਕ ਐਲੀਮੈਂਟ ਲਈ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰਦੇ ਹਾਂ. ਅਸੀਂ ਜੋ ਫੰਕਸ਼ਨ ਕਰਦੇ ਹਾਂ ਉਹ ਹੈ ਰੈਂਡਰਲਿਸਟ ਆਈਟਮ , ਜਿਸ ਵਿੱਚ ਇਹ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਕੁਝ ਤਰਕ ਸ਼ਾਮਲ ਹਨ ਕਿ ਕੀ ਮੌਜੂਦਾਟੈਕਇੰਡੇਐਕਸ ਐਰੇ ਵਿੱਚ ਮੌਜੂਦਾ ਤੱਤ ਹੈ ਜੋ ਅਸੀਂ ਪੇਸ਼ ਕਰ ਰਹੇ ਹਾਂ. ਜੇ ਇਹ ਹੈ, ਤਾਂ ਸਾਨੂੰ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਦੀ ਜ਼ਰੂਰਤ ਹੈ ਕਿ li ਤੇ ਕਲਾਸ ਨੇਮ ਲਈ ਮੁੱਲ ਚੁਣੀ ਸਤਰ ਸ਼ਾਮਲ ਹਨ. ਇਹ ਨਿਸ਼ਚਿਤ ਕਰੇਗਾ ਕਿ ਚੁਣੀ ਗਈ ਟਰੈਕ ਲਈ ਸਟਾਈਲ ਵੱਖਰੀ ਹੋਵੇਗੀ ਜਦੋਂ ਬਾਕੀ ਸੂਚੀ ਨਾਲ ਤੁਲਨਾ ਕੀਤੀ ਜਾਏਗੀ.

     ਰੈਂਡਰਲਿਸਟ ਆਈਟਮ (ਟਰੈਕ, i) {ਟ੍ਰੈਕ ਕਲਾਸ = ਇਸ ਨੂੰ ਛੱਡੋ. ਖਿਡੌਣੇ currentTrackIndex === ਟਰੈਕ id? "ਚੁਣਿਆ ਹੋਇਆ": "";ਵਾਪਸੀ (   {ਜੇ (ਇਹ. ਪ੍ਰੋਤਸਾਹਟ currentTrackIndex === ਟਰੈਕ id) {ਇਹ. activeTrack = cur;}}}onClick = {   => {ਇਹ. ਖਿਡੌਣੇ selectTrackNumber (ਟਰੈਕ id)}}> 
{ਟਰੈਕ. id}
{ਟਰੈਕ ਟਾਈਟਲ}
{ਟਰੈਕ. ਅਵਧੀ}
);}

ਲੀ ਤੱਤ ਵਿਚ ਕੁਝ ਹੋਰ ਮਹੱਤਵਪੂਰਣ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵੀ ਹਨ:

  • ਕੁੰਜੀ : ਜਦੋਂ ਵੀ ਸਾਡੇ ਕੋਲ ਇੱਕ ਸੂਚੀ ਹੁੰਦੀ ਹੈ, ਸਾਨੂੰ ਇਸ ਗੁਣ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ ਤਾਂ ਜੋ ਸੂਚੀ ਸਹੀ ਢੰਗ ਨਾਲ ਪੇਸ਼ ਕੀਤੀ ਜਾਵੇ. ਰੀਐਕਟਾਂ ਵਿਚ ਸੂਚੀਆਂ ਦੇ ਨਾਲ ਕੁੰਜੀਆਂ ਦੀ ਵਰਤੋਂ ਬਾਰੇ ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ, ਇਸ ਲੇਖ ਨੂੰ ਪ੍ਰਤਿਕਿਰਿਆ ਦਸਤਾਵੇਜ਼ਾਂ ਵਿਚ ਦੇਖੋ.

  • ਕਲਾਸ ਨੇਮ : ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਲੀ ਕੋਲ ਚੁਣਿਆ ਗਿਆ ਕਲਾਸ ਇਸ ਨਾਲ ਜੁੜਿਆ ਹੈ ਜੇਕਰ ਇਹ ਵਰਤਮਾਨ ਚੁਣਿਆ ਟਰੈਕ ਹੈ.

  • ਰੈਫਰ : ਅਸੀਂ ਟਰੈਕ ਸੂਚੀ ਦੇ ਕੰਟੇਨਰ ਦੇ ਸਹੀ ਸਥਾਨ ਦੀ ਗਣਨਾ ਕਰਨ ਲਈ ਰਿਫ ਗੁਣ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ. ਇਸ ਗਣਨਾ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਬਣਾਉਣ ਲਈ ਸਾਨੂੰ ਅਸਲੀ DOM ਤੱਤ ਤੱਕ ਪਹੁੰਚ ਕਰਨ ਦੀ ਲੋੜ ਹੈ

  • ਔਨਕਲਿਕ : ਜਦੋਂ ਉਪਭੋਗਤਾ ਕਿਸੇ ਖਾਸ ਟ੍ਰੈਕ ਦੀ ਚੋਣ ਕਰਦਾ ਹੈ, ਅਸੀਂ ਇਸ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰਦੇ ਹਾਂ, ਜੋ ਕਿ ਇਸਦਾ ਕਾਲ ਹੈ. ਖਿਡੌਣੇ ਚੋਣ ਟ੍ਰੈਕ ਨੰੰਬਰ ਇਸ ਫੰਕਸ਼ਨ ਨੂੰ ਕੰਟਰੋਲਸ ਕੰਪੋਨੈਂਟ ਲਈ ਕਲਿਕ ਹੈਂਡਲਰ ਦੀ ਤਰਾਂ, ਆਪਣੇ ਮਾਤਾ ਜਾਂ ਪਿਤਾ ਐਪ ਭਾਗ ਤੋਂ ਟ੍ਰੈਕਲਿਸਟ ਭਾਗ ਵਿੱਚ ਪਾਸ ਕੀਤਾ ਗਿਆ ਹੈ. ਜਦੋਂ ਇਸ ਫੰਕਸ਼ਨ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਸਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਸਥਿਤੀ ਅਪਡੇਟ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, currentTrackIndex ਦੇ ਨਾਲ ਯੂਜ਼ਰ ਚੁਣੇ ਹੋਏ ਟ੍ਰੈਕ ਨੰਬਰ ਤੇ ਸੈਟ ਹੋ ਰਿਹਾ ਹੈ.

     ਚੋਣ ਟ੍ਰੈਕਨੰਬਰ (ਟਰੈਕਆਈਡੀ) {ਇਹ. setState ({currentTrackIndex: ਟਰੈਕਆਈਡੀ, ਖੇਡਣਾ: ਸਹੀ}, ਇਹ. playAudio);}    

ਇਸ ਨੂੰ ਅਜ਼ਮਾਓ!

ਕੋਡਪੇਨ ਉਦਾਹਰਨ ਵੇਖੋ. ਇਹ ਐਲਬਮ ਆਰਟ ਇੱਕ ਗਾਣੇ ਦੇ ਇੱਕ ਐਲਬਮ ਤੋਂ ਆਉਂਦਾ ਹੈ ਜਿਸਨੂੰ ਗਲਾਸ ਸ਼ਮਾਲੀਟ ਕਹਿੰਦੇ ਹਨ. ਕਿਉਂਕਿ ਅਸੀਂ "ਗਲਾਸ ਸ਼ਮਾਲੀਟ" ਸਾਉਂਡਟ੍ਰੈਕ ਨੂੰ ਕਾਨੂੰਨੀ ਤੌਰ ਤੇ ਨਹੀਂ ਚਲਾ ਸਕਦੇ, ਇਸ ਲਈ ਅਸੀਂ ਆਪਣੀ ਜਗ੍ਹਾ ਤੇ ਚਲਾਉਣ ਲਈ ਕੁਝ ਰਾਇਲਟੀ-ਮੁਕਤ ਸੰਗੀਤ ਨੂੰ ਚੁਣਿਆ ਹੈ ਇਸ ਲਈ ਅਸੀਂ ਸੰਗੀਤ ਪਲੇਅਰ ਦਾ ਪੂਰਾ ਪ੍ਰਭਾਵ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹਾਂ.

ਪੈਨ ਪ੍ਰਤੀਕ ਦੇਖੋ ਡੇਲੀਯੂਆਈ- 009 - ਕੋਡਪੈਨ ਤੇ ਜੈਕ ਔਲੀਵਰ ਦੁਆਰਾ (@ ਜੇਕੋਲਵਰ) ਸੰਗੀਤਕਾਰ ਪਲੇਅਰ.

ਇਹ ਪੋਸਟ ਫੁੱਲ ਸਟੈਕ ਰੀਐਕਟ 'ਤੇ ਪ੍ਰਤੀਕਿਰਿਆ ਰੋਜ਼ਾਨਾ UI ਪੋਸਟ ਦੀ ਲੜੀ ਦਾ ਇੱਕ ਹਿੱਸਾ ਹੈ, ਜੋ ਕਿ ਜੈਕ ਔਲੀਵਰ, ਸੋਫਿਆ ਸ਼ੋਇਮੇਰ ਅਤੇ ਫੁੱਲ ਸਟੈਕ ਪ੍ਰਤੀਕਿਰਿਆ' ਤੇ ਬਾਕੀ ਦੀ ਟੀਮ ਵਿਚਕਾਰ ਇੱਕ ਸਾਂਝੇ ਯਤਨ ਹੈ.

ਕੀ ਮੂਲ ਰੂਪ ਵਿਚ ਰੀਟੇਕ ਫੰਨਾਮੈਟਲਜ਼ ਵਿਚ ਡੂੰਘੀ ਡੁਬਕੀ ਕਰਨੀ ਚਾਹੁੰਦੇ ਹੋ? ਫੁੱਲ ਸਟੈਕ ਪ੍ਰਤੀਕ ਦੇਖੋ: ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ ਰੀਐਕਸ਼ਨ ਜੇ ਐਸ ਐਂਡ ਸੈਮਟ ਦੀ ਪੂਰੀ ਗਾਈਡ.

ਕੀ ਪ੍ਰਤੀਕਰਮ 16 ਵਿੱਚ ਨਵਾਂ ਕੀ ਹੈ?ਕੀ ਪ੍ਰਤੀਕਰਮ 16 ਵਿਚ ਨਵਾਂ ਹੈ? ਸੰਬੰਧਿਤ ਵਿਸ਼ਾ:
ES6AngularJSNode jsTools & Semalt
ਸ਼ੁਰੂਆਤ ਕਰਨ ਵਾਲਿਆਂ ਲਈ ਸਿੱਖਣ ਦਾ ਸਭ ਤੋਂ ਵਧੀਆ ਤਰੀਕਾ
ਵੇਸ ਬੋਸ
ਤੁਹਾਨੂੰ ਅਸਲ ਦੁਨੀਆਂ ਬਣਾਉਣ ਲਈ ਇੱਕ ਕਦਮ-ਦਰ-ਕਦਮ ਸਿਖਲਾਈ ਕੋਰਸ ਜੇਐਸ + ਫਾਇਰਬੇਜ ਐਪਸ ਅਤੇ ਵੈਬਸਾਈਟ ਦੇ ਭਾਗ ਦੁਪਹਿਰ ਦੋ ਕੁ ਵਜੇ ਕੂਪਨ ਕੋਡ 'SITEPOINT' ਨੂੰ ਚੈੱਕਅਪ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ 25% ਬੰਦ ਦਾ ਉਪਯੋਗ ਕਰੋ.
March 1, 2018