আমার অনক্লিককে রেন্ডারে কেন বলা হচ্ছে? - প্রতিক্রিয়া.জেএস

Question 1

আমার তৈরি একটি উপাদান রয়েছে যা আমি তৈরি করেছি:

class Create extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    var playlistDOM = this.renderPlaylists(this.props.playlists);
    return (
      <div>
        {playlistDOM}
      </div>
    )
  }

  activatePlaylist(playlistId) {
    debugger;
  }

  renderPlaylists(playlists) {
    return playlists.map(playlist => {
      return <div key={playlist.playlist_id} onClick={this.activatePlaylist(playlist.playlist_id)}>{playlist.playlist_name}</div>
    });
  }
}

function mapStateToProps(state) {
  return {
    playlists: state.playlists
  }
}

export default connect(mapStateToProps)(Create);

যখন আমি renderএই পৃষ্ঠাটি, আমার activatePlaylistপ্রতিটি জন্য ডাকা হয় । যদি আমি পছন্দ করি:playlistmapbind activatePlaylist

activatePlaylist.bind(this, playlist.playlist_id)

আমি একটি বেনামী ফাংশনও ব্যবহার করতে পারি:

onClick={() => this.activatePlaylist(playlist.playlist_id)}

তাহলে এটি প্রত্যাশার মতো কাজ করে। কেন এমন হয়?

Question 2

আপনার যদি ফাংশনটির onClick রেফারেন্সের জন্য পাস দরকার হয়, যখন আপনি এটি করেন তখন আপনি activatePlaylist( .. )ফাংশনটি কল করেন এবং onClickযে মানটি দিয়ে ফিরে এসেছিল activatePlaylist। আপনি এই তিনটি বিকল্পের একটি ব্যবহার করতে পারেন:

ঘ । ব্যবহার.bind

activatePlaylist.bind(this, playlist.playlist_id)

ঘ । তীর ফাংশন ব্যবহার করে

onClick={ () => this.activatePlaylist(playlist.playlist_id) }

ঘ । বা থেকে ফাংশন ফিরেactivatePlaylist

activatePlaylist(playlistId) {
  return function () {
     // you code 
  }
}

Question 3

প্রতিক্রিয়া শ্রেণিবদ্ধ উপাদানগুলি প্রকাশের ঘোষণা দেওয়ার সময় এই আচরণটি নথিভুক্ত হয়েছিল।

https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html

অটোবাইন্ডিং

React.createClass একটি অন্তর্নির্মিত যাদু বৈশিষ্ট্য রয়েছে যা আপনার জন্য স্বয়ংক্রিয়ভাবে সমস্ত পদ্ধতির সাথে আবদ্ধ। এটি জাভাস্ক্রিপ্ট বিকাশকারীদের জন্য কিছুটা বিভ্রান্তিকর হতে পারে যা অন্যান্য শ্রেণিতে এই বৈশিষ্ট্যটির সাথে ব্যবহার হয় না বা তারা প্রতিক্রিয়া থেকে অন্য শ্রেণিতে চলে যাওয়ার সময় বিভ্রান্তিকর হতে পারে।

অতএব আমরা সিদ্ধান্ত নিয়েছি যে এই বিল্ট-ইনটি রিএ্যাক্টের ক্লাস মডেলটিতে নেই। আপনি চাইলে আপনি এখনও আপনার নির্মাত্রে স্পষ্টভাবে পদ্ধতিগুলি প্রাকবাইন্ড করতে পারেন।

Question 4

আমি জানি এই পোস্টটি ইতিমধ্যে কয়েক বছরের পুরানো, তবে এই সাধারণ ভুল সম্পর্কে সর্বশেষতম প্রতিক্রিয়া টিউটোরিয়াল / ডকুমেন্টেশনটি উল্লেখ করার জন্য (আমি এটিও করেছি) https://reactjs.org/tutorial/tutorial.html থেকে :

বিঃদ্রঃ

টাইপিং সংরক্ষণ এবং এর বিভ্রান্তিমূলক আচরণ এড়াতে, আমরা ইভেন্ট হ্যান্ডলারের জন্য এখানে এবং আরও নীচে তীর ফাংশন সিনট্যাক্স ব্যবহার করব:

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => alert('click')}>
       {this.props.value}
     </button>
   );
 }
}

কীভাবে অনক্লিক = {() => সতর্কতা ('ক্লিক করুন') with দিয়ে দেখুন, আমরা অনক্লিক প্রোপ হিসাবে কোনও ফাংশনটি পার করছি। প্রতিক্রিয়া কেবল ক্লিকের পরে এই ফাংশনটিকে কল করবে। () => ভুলে যাওয়া এবং অন ক্লিক ক্লিক করে = {সতর্কতা ('ক্লিক করুন') a একটি সাধারণ ভুল, এবং প্রতিটি সময় উপাদানটি পুনরায় রেন্ডার করে সতর্কতাটিকে আগুন ধরিয়ে দেবে।

Question 5

আপনি যে পদ্ধতিটি পাস করছেন this.activatePlaylist(playlist.playlist_id), তত্ক্ষণাত এই পদ্ধতিটি কল করবে। আপনার onClickইভেন্টটির পদ্ধতিটির রেফারেন্সটি পাস করা উচিত । আপনার সমস্যা সমাধানের জন্য নীচের বর্ণিত একটি প্রয়োগ অনুসরণ করুন।

ঘ।

onClick={this.activatePlaylist.bind(this,playlist.playlist_id)}

এখানে বাইন্ড প্রপার্টি প্রসঙ্গ এবং তর্ক this.activatePlaylistদিয়ে পাস thisকরে পদ্ধতির একটি রেফারেন্স তৈরি করতে ব্যবহৃত হয়playlist.playlist_id

ঘ।

onClick={ (event) => { this.activatePlaylist.(playlist.playlist_id)}}

এটি অনক্লিক ইভেন্টে একটি ফাংশন সংযুক্ত করবে যা কেবল ব্যবহারকারী ক্লিক ক্রিয়াকলাপে ট্রিগার হবে। এই কোডটি উপস্থিত থাকলে this.activatePlaylistপদ্ধতিটি কল করা হবে।