আমি কখন React.cloneElement বনাম this.prop.children ব্যবহার করা উচিত?

Question

আমি এখনও প্রতিক্রিয়াটির এক নজরে আছি এবং ইন্টারনেটে বহু উদাহরণে আমি শিশু উপাদানগুলির রেন্ডারিংয়ে এই প্রকরণটি দেখতে পাই যা আমি বিভ্রান্তিকর বলে মনে করি। সাধারণত আমি এটি দেখতে:

class Users extends React.Component {
  render() {
    return (
      <div>
        <h2>Users</h2>
        {this.props.children}
      </div>
    )
  }
}

তবে তারপরে আমি এর উদাহরণ দেখতে পাচ্ছি:

<ReactCSSTransitionGroup
     component="div"
     transitionName="example"
     transitionEnterTimeout={500}
     transitionLeaveTimeout={500}
     >
     {React.cloneElement(this.props.children, {
       key: this.props.location.pathname
      })}
</ReactCSSTransitionGroup>

এখন আমি API বুঝতে কিন্তু ডক্স ঠিক স্পষ্ট না যখন আমি এটি ব্যবহার করতে হবে।

সুতরাং একটি কি করতে পারে যা অন্যটি পারে না? কেউ আমাকে আরও ভাল উদাহরণ দিয়ে ব্যাখ্যা করতে পারে?

Comments

youtube.com/watch?v=hEGg-3pIHlE এই লোকটি দেখায় যে কীভাবে তিনি ক্লোন এলিমেন্ট ব্যবহার করেন। কয়েকটি উদাহরণের জন্য এটি পরীক্ষা করে দেখুন

— iuri

Answer 1

সম্পাদনা:

এ Vennesa এর উত্তর পরিবর্তে, যা একটি ভাল ব্যাখ্যা।

মূল:

প্রথমত, React.cloneElementউদাহরণটি কেবল তখনই কার্যকর হয় যদি আপনার শিশুটি একক প্রতিক্রিয়া উপাদান থাকে।

প্রায় সব কিছুর {this.props.children}জন্য আপনি চান। ক্লোনিং আরও কিছু উন্নত পরিস্থিতিতে কার্যকর, যেখানে পিতা-মাতা কোনও উপাদান পাঠায় এবং সন্তানের উপাদানটিকে সেই উপাদানটির জন্য কিছু প্রপস পরিবর্তন করতে হবে বা আসল ডিওএম উপাদানটি অ্যাক্সেস করার জন্য রেফের মতো জিনিস যুক্ত করতে হবে।

উপরের উদাহরণে, পিতামাতা যা সন্তানের দেয় তা উপাদানটির মূল প্রয়োজনীয়তা সম্পর্কে জানে না, সুতরাং এটি প্রদত্ত উপাদানটির একটি অনুলিপি তৈরি করে এবং বস্তুর কিছু অনন্য শনাক্তকারীর উপর ভিত্তি করে একটি কী যুক্ত করে। কী কী করে সে সম্পর্কে আরও তথ্যের জন্য: https://facebook.github.io/react/docs/m Multiple-comp घटक.html

Answer 2

props.childrenপ্রকৃত শিশুরা নয়; এটা descriptorবাচ্চাদের। সুতরাং আপনার কাছে পরিবর্তনের আসলে কিছুই নেই; আপনি কোনও প্রপস পরিবর্তন করতে পারবেন না, বা কোনও কার্যকারিতা সম্পাদনা করতে পারবেন না; আপনি কেবল পারেন read from it। আপনার যদি কোনও পরিবর্তন করতে হয় তবে আপনাকে new elementsব্যবহার করে তৈরি করতে হবে React.CloneElement।

https://egghead.io/lessons/react-use-react-cloneelement-to-extend-functionality-of-children-components

একটি উদাহরণ:

একটি উপাদান প্রধান রেন্ডার ফাংশন যেমন App.js:

render() {   
    return(
            <Paragraph>
              <Sentence>First</Sentence>
              <Sentence>Second</Sentence>
              <Sentence>Third</Sentence>
            </Paragraph>   
    ) 
}

এখন ধরা যাক আপনার onClickপ্রতিটি সন্তানের সাথে একটি যুক্ত করা প্রয়োজন Paragraph; সুতরাং আপনার মধ্যে Paragraph.jsআপনি করতে পারেন:

render() {
        return (
          <div>
          {React.Children.map(this.props.children, child => {
            return React.cloneElement(child, {
              onClick: this.props.onClick })   
         })}
         </div>
       ) 
}

তাহলে কেবল আপনি এটি করতে পারেন:

render() {   
  return(
        <Paragraph onClick={this.onClick}>
          <Sentence>First</Sentence>
          <Sentence>Second</Sentence>
          <Sentence>Third</Sentence>
        </Paragraph>   
   ) 
}

নোট:React.Children.map ফাংশন শুধুমাত্র দেখতে হবে top levelউপাদান, এটা যে যারা উপাদান রেন্ডার কোন দেখতে পাবেন না | এর অর্থ হ'ল আপনি বাচ্চাদের সরাসরি প্রপস সরবরাহ করছেন ( <Sentence />উপাদানগুলি এখানে )। আপনার যদি প্রপসটি আরও নিচে পাস করার প্রয়োজন হয় তবে আসুন আমরা বলি যে প্রপ ব্যবহার করতে চায় <div></div>এমন <Sentence />উপাদানগুলির মধ্যে একটির ভিতরে একটি ভিতরে থাকবে onClickতবে সেই ক্ষেত্রে আপনি এটি ব্যবহার করতে পারেন Context API। Paragraphসরবরাহকারী এবং Sentenceউপাদানগুলি ভোক্তা হিসাবে তৈরি করুন ।

Comments

এটি একটি বাস্তব বিশ্বের উদাহরণ সহ একটি সুস্পষ্ট উত্তর। এটি আরও upvotes প্রয়োজন।

— সিওয়ারিয়ারিওর 404

@ সিওয়ারিওরিওল ৪৪৪ এর সাথে একমত - আমি অনুমান করব যে ওপি একক সন্তানের চেয়ে সংগ্রহের উপরে পুনরাবৃত্তি করতে চেয়েছিল কারণ তার ব্যবহারকারী ইন্টারফেসটিতে শিরোনাম হিসাবে "ব্যবহারকারী" / বহুবচন রয়েছে। ব্যবহার React.Children.mapসাথে React.cloneElement@vennesa পয়েন্ট আউট হিসাবে, খুব শক্তিশালী

— jakeforaker

Answer 3

আসলে, এর React.cloneElementসাথে কঠোরভাবে জড়িত নয় this.props.children।

যখনই আপনি প্রয়োজন ক্লোন উপাদানের (প্রতিক্রিয়া এটা দরকারী PropTypes.element, পিতা বা মাতা অনুপস্থিত ঐ উপাদান internals সম্পর্কে জ্ঞান আছে (যেমন, ইভেন্ট হ্যান্ডলার সংযোজনের বা বরাদ্দ ছাড়া) যোগ করার জন্য / ওভাররাইড সাজসরঞ্জাম key/ refবৈশিষ্ট্যাবলী)।

এছাড়াও প্রতিক্রিয়া উপাদান অপরিবর্তনীয় ।

React.cloneElement (উপাদান, [প্রপস], [... শিশু]] প্রায় সমান: <element.type {...element.props} {...props}>{children}</element.type>

---

যাইহোক, childrenরিএ্যাক্টের প্রপটি বিশেষত কন্টেন্টের জন্য (ওরফে কম্পোজিশন ) ব্যবহৃত হয়, React.Childrenএপিআইয়ের সাথে জুড়ি তৈরি করে এবং React.cloneElementপ্রোপস.কম্ডারেন ব্যবহার করে এমন উপাদানগুলি অভ্যন্তরীণভাবে রেন্ডারিং অংশটি উত্পাদন করার সময় আরও যুক্তি পরিচালনা করতে পারে (উদাহরণস্বরূপ, রাষ্ট্রীয় রূপান্তরগুলি, ইভেন্টগুলি, ডোম পরিমাপ ইত্যাদি) ally যেখানেই এটি ব্যবহৃত হয়, প্রতিক্রিয়া রাউটার <switch/>বা যৌগিক উপাদানগুলি <select/>দুর্দান্ত উদাহরণ।

একটি উল্লেখযোগ্য জিনিস যা উল্লেখযোগ্য তা হ'ল প্রতিক্রিয়ার উপাদানগুলি প্রপস.চাইল্ডেনের মধ্যে সীমাবদ্ধ নয়।

function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}

function App() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      } />
  );
}

তারা হতে পারেন যাই হোক না কেন সাজসরঞ্জাম জ্ঞান করে তোলে যে, কী, কম্পোনেন্ট একটি ভাল চুক্তি সংজ্ঞায়িত করতে ছিল যাতে এটি ভোক্তাদের অন্তর্নিহিত বাস্তবায়ন বিবরণ থেকে পৃথক করা যেতে পারে, এটা ব্যবহার করছে নির্বিশেষে কিনা React.Children, React.cloneElementঅথবা এমনকি React.createContext।