আমি কীভাবে সমস্ত ট্রান্সসিটিভ অ্যাক্সেসযোগ্য রাজ্য সহ একটি প্রতিক্রিয়া উপাদান পুনরায় সেট করতে পারি?

Question 1

আমার মাঝে মাঝে প্রতিক্রিয়ার উপাদানগুলি থাকে যা ধারণাগতভাবে রাষ্ট্রীয় হয় যা আমি পুনরায় সেট করতে চাই। আদর্শ আচরণটি পুরানো উপাদানটি সরানো এবং একটি নতুন, মূল উপাদান পড়ার সমতুল্য।

প্রতিক্রিয়া এমন একটি পদ্ধতি সরবরাহ করে setStateযা উপাদানগুলিকে স্বতন্ত্র রাষ্ট্র নির্ধারণের অনুমতি দেয়, তবে এটি ব্রাউজার ফোকাস এবং ফর্মের রাজ্যের মতো অন্তর্নিহিত রাষ্ট্রকে বাদ দেয় এবং এটি তার বাচ্চাদের অবস্থাও বাদ দেয়। এই সমস্ত অপ্রত্যক্ষ রাজ্যটিকে ধরা খুব কঠিন কাজ হতে পারে এবং আমি একে কঠোরভাবে এবং সম্পূর্ণরূপে সমাধান করা পছন্দ করি বরং বিস্ময়কর অবস্থার প্রতিটি নতুন বিটের সাথে ঘড়ঘড়-এ-তিল বাজানো।

এটি করার জন্য কি কোনও এপিআই বা প্যাটার্ন রয়েছে?

সম্পাদনা: আমি একটি তুচ্ছ উদাহরণ তৈরি করেছি যা this.replaceState(this.getInitialState())পদ্ধতির সাথে প্রদর্শন করে এবং পদ্ধতির সাথে এর বিপরীতে this.setState(this.getInitialState()): jsfiddle - replaceStateআরও দৃ is ় ।

Question 2

আপনার উল্লিখিত অন্তর্নিহিত ব্রাউজারের অবস্থা এবং শিশুদের অবস্থা পুনরায় সেট করা হয়েছে তা নিশ্চিত করতে, আপনি ফিরে আসা মূল-স্তরের উপাদানটিতে একটি keyবৈশিষ্ট্য যুক্ত করতে পারেন render; যখন এটি পরিবর্তন হবে, সেই উপাদানটি ফেলে দেওয়া হবে এবং স্ক্র্যাচ থেকে তৈরি করা হবে।

render: function() {
    // ...
    return <div key={uniqueId}>
        {children}
    </div>;
}

স্বতন্ত্র উপাদানটির স্থানীয় অবস্থা পুনরায় সেট করার জন্য কোনও শর্টকাট নেই।

Question 3

পরিবর্তে আপনার পরিবর্তে replaceStateব্যবহার setStateকরা উচিত ।

দস্তাবেজগুলি বলে যে replaceState"প্রতিক্রিয়াটির ভবিষ্যতের সংস্করণে পুরোপুরি সরিয়ে দেওয়া যেতে পারে।" আমি মনে করি এটি অবশ্যই মুছে ফেলা হবে কারণ replaceStateপ্রতিক্রিয়া দর্শনের সাথে সত্যই মাতামাতি করে না। এটি রিয়্যাক্ট উপাদান তৈরি করার সুবিধার্থে সুইডেন ছুরি-ওয়াইন্ডা মনে করে feel এটি ছোট হয়ে ওঠার জন্য আরও একটি প্রতিক্রিয়া উপাদানটির প্রাকৃতিক বিকাশের বিরুদ্ধে কৃতজ্ঞ।

প্রতিক্রিয়া হিসাবে, আপনার যদি সাধারণীকরণ বা বিশেষীকরণের ভুল করতে হয়: বিশেষায়নের লক্ষ্য। একটি ছদ্মবেশ হিসাবে, আপনার উপাদানগুলির জন্য রাজ্যের গাছের একটি নির্দিষ্ট পার্সিমনি থাকা উচিত (যদিও আপনি একটি ব্র্যান্ড-স্প্যানিং নতুন পণ্য সজ্জিত করছেন তবে স্বাদে এই নিয়মটি ভঙ্গ করা ভাল)।

যাইহোক আপনি এটি এটি কিভাবে। উপরের বেনের (গৃহীত) উত্তরগুলির মতো, তবে এটির মতো:

this.setState(this.getInitialState());

এছাড়াও (যেমন বেনও বলেছেন) "ব্রাউজারের অবস্থা" পুনরায় সেট করতে আপনাকে সেই ডিওএম নোডটি সরিয়ে ফেলতে হবে। ভিডমের শক্তি বাড়ান এবং keyসেই উপাদানটির জন্য একটি নতুন প্রপ ব্যবহার করুন। নতুন রেন্ডার সেই উপাদানটি পাইকারি প্রতিস্থাপন করবে।

তথ্যসূত্র: https://facebook.github.io/react/docs/comp घटक-api.html# replacestate

Question 4

সংযোজন ক keyআপনাকে পুনরায় পুনঃনির্মাণ করতে হবে এমন উপাদানের সাথে অ্যাট্রিবিউট যুক্ত করা প্রতিবার এটি পুনরায় লোড করবে propsবা stateউপাদান পরিবর্তনের সাথে যুক্ত হবে।

কী = {নতুন তারিখ ()। গেটটাইম ()}

এখানে একটি উদাহরণ:

render() {
  const items = (this.props.resources) || [];
  const totalNumberOfItems = (this.props.resources.noOfItems) || 0;

  return (
    <div className="items-container">
      <PaginationContainer
        key={new Date().getTime()}
        totalNumberOfItems={totalNumberOfItems}
        items={items}
        onPageChange={this.onPageChange}
      />
    </div>
  );
}