{This.props.children What কী এবং আপনার কখন এটি ব্যবহার করা উচিত?

Question

প্রতিক্রিয়া বিশ্বে একজন শিক্ষানবিস হয়ে, আমি গভীরভাবে বুঝতে চাই যে আমি যখন ব্যবহার করি তখন কী হয় {this.props.children}এবং একই ব্যবহারের পরিস্থিতি কী। নীচের কোড স্নিপেটে এর প্রাসঙ্গিকতা কী?

render() {
  if (this.props.appLoaded) {
    return (
      <div>
        <Header
          appName={this.props.appName}
          currentUser={this.props.currentUser}
        />
        {this.props.children}
      </div>
    );
  }
}

Comments

রিঅ্যাক্টজেএস

— maazadeeb

প্রদত্ত লিঙ্কটিতে এটি পরিষ্কার ছিল না যে আমি যখন কোন উপাদানটির ভিতরে {this.prop.children use ব্যবহার করি তখন কী হয়।

— নিম্মি

সেরা রিসোর্স mxstbr.blog/2017/02/react-children-दीपডিভ

— অক্ষয় বিজয় জৈন

Answer 1

এমনকি 'শিশু' কি?

প্রতিক্রিয়া দস্তাবেজগুলি বলে যে আপনি এমন props.childrenউপাদানগুলিতে ব্যবহার করতে পারেন যা 'জেনেরিক বাক্স' উপস্থাপন করে এবং তাদের বাচ্চাদের সময়ের আগে জানে না। আমার জন্য, এটি সত্যিই জিনিসগুলি পরিষ্কার করেনি। আমি কারও কাছে নিশ্চিত, এই সংজ্ঞাটি সঠিক ধারণা দেয় তবে এটি আমার পক্ষে হয়নি।

কী this.props.childrenকরে তার আমার সহজ ব্যাখ্যাটি হ'ল এটি কোনও উপাদানকে অনুরোধ করার সময় খোলার এবং সমাপনী ট্যাগগুলির মধ্যে যা কিছু অন্তর্ভুক্ত তা প্রদর্শন করতে ব্যবহৃত হয়।

একটি সহজ উদাহরণ:

একটি রাষ্ট্রবিহীন ফাংশনের একটি উদাহরণ যা একটি উপাদান তৈরি করতে ব্যবহৃত হয়। আবার, যেহেতু এটি একটি ফাংশন, thisতাই কোনও কীওয়ার্ড নেই তাই কেবল ব্যবহার করুনprops.children

const Picture = (props) => {
  return (
    <div>
      <img src={props.src}/>
      {props.children}
    </div>
  )
}

এই উপাদানটিতে এমন একটি রয়েছে <img>যা কিছু গ্রহণ করছে propsএবং তারপরে এটি প্রদর্শিত হচ্ছে {props.children}।

এই উপাদানটি যখনই চাওয়া {props.children}হবে তখন এটি প্রদর্শিত হবে এবং এটি উপাদানটির খোলার এবং সমাপনী ট্যাগগুলির মধ্যে যা আছে তার কেবলমাত্র একটি রেফারেন্স।

//App.js
render () {
  return (
    <div className='container'>
      <Picture key={picture.id} src={picture.src}>
          //what is placed here is passed as props.children  
      </Picture>
    </div>
  )
}

কোনও স্ব-সমাপনী ট্যাগ দিয়ে উপাদানটি আহ্বান করার পরিবর্তে <Picture />আপনি যদি পুরোপুরি উদ্বোধন করেন এবং ট্যাগগুলি সমাপ্ত হয় <Picture> </Picture>তবে আপনি এর মধ্যে আরও কোড রাখতে পারেন।

এই দম্পতিরা <Picture> এর সামগ্রী থেকে উপাদানটিকে এবং আরও পুনরায় ব্যবহারযোগ্য করে তোলে।

রেফারেন্স: প্রতিক্রিয়াপ্রাপ্ত শিশুদের একটি দ্রুত পরিচয়

Comments

যদি পুনরায় ব্যবহারযোগ্যতা শিশু নোডগুলির জন্য উদ্বিগ্ন না হয় তবে শিশু উপাদানগুলির মধ্যে {প্রপস.চিল্ডেন calling কল করার সময় কোনও কার্যকারিতা আছে কি?

— নিম্মি

@ নিম্মি যখন {প্রপস.চিল্ডেন using ব্যবহার করছেন তখন আমাদের পারফরম্যান্সের সমস্যা নেই, প্রপস হিসাবে কেবল উত্তীর্ণ উপাদান প্রয়োজন। এবং যখন আমরা শিশুদের উপাদানগুলির ভিতরে বাচ্চাদের ব্যবহার করতে পারি {props.children} ব্যবহার করার দরকার নেই

— সোরেশ চেরেসা

উদাহরণ কোডবুর্স্ট.আইও

— আলপিত আনন্দ

@ অ্যালপিটান এবং উত্তরটির শেষে আপনি রেফারেন্স দেখতে পাবেন: |

— সুরেশ চেরেসা

অনেক ধন্যবাদ. খুব সুন্দরভাবে ব্যাখ্যা করা হয়েছে।

— অলোক রঞ্জন

Answer 2

আমি ধরে নিয়েছি আপনি এটি একটি প্রতিক্রিয়া উপাদানটির renderপদ্ধতিতে দেখছেন , এটির মতো (সম্পাদনা: আপনার সম্পাদিত প্রশ্নটি প্রকৃতপক্ষে তা দেখায়) :

class Example extends React.Component {
  render() {
    return <div>
      <div>Children ({this.props.children.length}):</div>
      {this.props.children}
    </div>;
  }
}

class Widget extends React.Component {
  render() {
    return <div>
      <div>First <code>Example</code>:</div>
      <Example>
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </Example>
      <div>Second <code>Example</code> with different children:</div>
      <Example>
        <div>A</div>
        <div>B</div>
      </Example>
    </div>;
  }
}

ReactDOM.render(
  <Widget/>,
  document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

childrenউপাদান যা কোন সন্তান উপাদান উপাদান মধ্যে সংজ্ঞায়িত, যেমন রয়েছে প্রতিক্রিয়া একটি বিশেষ সম্পত্তি divsভিতরে Exampleউপরে। {this.props.children}রেন্ডার রেজাল্টে সেই শিশুদের অন্তর্ভুক্ত করে।

... একই ব্যবহার করার জন্য পরিস্থিতিগুলি কী

আপনি যখন শিশু উপাদানগুলি সরাসরি রেন্ডার আউটপুটে সরাসরি, অপরিবর্তিত অবস্থায় অন্তর্ভুক্ত করতে চান তখন আপনি এটি করতে চাইবেন; এবং না আপনি যদি না।

Comments

যদি পুনরায় ব্যবহারযোগ্যতা শিশু নোডগুলির জন্য উদ্বিগ্ন না হয় তবে শিশু উপাদানগুলির মধ্যে {প্রপস.চিল্ডেন calling কল করার সময় কোনও কার্যকারিতা আছে কি?

— নিম্মি

@ নিম্মি: আমি দুঃখিত, সন্তানের উপাদানগুলির মধ্যে এটি ব্যবহার করার চেয়ে আপনি "" ... দ্বারা কী বোঝাতে চেয়েছেন তা আমি জানি না।

— টিজে ক্রাউডার

আমি সন্তানের স্ব স্ব স্ব স্ব স্ব স্ব অংশে সরাসরি নোড লেখার চেয়ে সন্তানের উপাদানগুলিতে "কলিং {this.prop.children meant" বলতে চাইছিলাম।

— নিম্মি

@ নিম্মি আমি ধরে নিচ্ছি আপনি ভাবছেন যে আমি কেন এটি লিখতে পারব - আমি এটি জানি} যদি এটি হয় তবে দয়া করে এটি করুন এবং পারফরম্যান্সে কিছুটা সুবিধা পান। তবে আপনার উপাদানটি স্থিতিশীল হবে, এটি আপনার কোডবেজে আলাদা জায়গায় বিভিন্ন শিশুদের সেট দিয়ে পুনরায় ব্যবহার করা যাবে না।

— সাবিন সেবাস্তিয়ান

@ এসএসকে: আহ! সুন্দর. নিম্মি - হ্যাঁ, আপনি সরাসরি আপনার নিজের মধ্যে শিশুদের লিখতে পারেন render, তবে তারা প্রতিটি ক্ষেত্রে একই শিশু হবে। শিশু উপাদান (যেখানে উপযুক্ত সেখানে) গ্রহণ করে, আপনার উপাদানগুলির প্রতিটি উদাহরণে আলাদা আলাদা সামগ্রী থাকতে পারে। আমি উত্তরে উদাহরণ আপডেট করেছি।

— টিজে ক্রাউডার

Answer 3

props.children কোনও উপাদানটি চাওয়ার / রেন্ডার করার সময় প্রারম্ভিক এবং সমাপনী ট্যাগগুলির মধ্যে সামগ্রীর প্রতিনিধিত্ব করে:

const Foo = props => (
  <div>
    <p>I'm {Foo.name}</p>
    <p>abc is: {props.abc}</p>

    <p>I have {props.children.length} children.</p>
    <p>They are: {props.children}.</p>
    <p>{Array.isArray(props.children) ? 'My kids are an array.' : ''}</p>
  </div>
);

const Baz = () => <span>{Baz.name} and</span>;
const Bar = () => <span> {Bar.name}</span>;

অনুরোধ / কল / রেন্ডার Foo:

<Foo abc={123}>
  <Baz />
  <Bar />
</Foo>