187

অনেকগুলি টেম্পলেট ভাষায় "স্লট" বা "ফলন" বিবৃতি থাকে, যা অন্য কোনও টেমপ্লেটের অভ্যন্তরে একটি টেম্পলেট মোড়ানোর জন্য নিয়ন্ত্রণের কিছুটা বিপরীত পরিবর্তন করতে দেয়।

কৌণিকটিতে "ট্রান্সক্র্লেড" বিকল্প রয়েছে ।

রেলগুলির ফলনের বিবরণ রয়েছে । যদি React.js এর উত্পাদ বিবৃতি থাকে তবে এটি দেখতে এরকম হবে:

var Wrapper = React.createClass({
  render: function() {
    return (
      <div className="wrapper">
        before
          <yield/>
        after
      </div>
    );
  }
});

var Main = React.createClass({
  render: function() {
    return (
      <Wrapper><h1>content</h1></Wrapper>
    );
  }
});

পছন্দসই আউটপুট:

<div class="wrapper">
  before
    <h1>content</h1>
  after
</div>

হায়রে, React.js এর একটি নেই <yield/>। একই আউটপুট অর্জনের জন্য আমি কীভাবে র‍্যাপার উপাদানটি সংজ্ঞায়িত করব?

— NVI
সূত্র

এটা কি তোমার প্রশ্নের উত্তর? প্রথম উপাদানটির বিষয়বস্তু ট্রান্সক্লোড করতে কীভাবে কোনও বিক্রিয় উপাদানটিকে অন্য প্রতিক্রিয়া উপাদানগুলিতে পাস করবেন?

— মাইকেল ফ্রেইজিম

245

চেষ্টা করুন:

var Wrapper = React.createClass({
  render: function() {
    return (
      <div className="wrapper">
        before
          {this.props.children}
        after
      </div>
    );
  }
});

একাধিক উপাদান দেখুন : ডকসগুলিতে আরও তথ্যের জন্য শিশু এবং প্রপসগুলির প্রকার ।

— সোফি আল্পার্ট
সূত্র

বা আপনি একটি উচ্চ-অর্ডার উপাদান ব্যবহার করতে পারেন :) stackoverflow.com/a/31564812/82609

— সেবাস্তিয়ান লোরবার

159

ব্যবহার `children`

const Wrapper = ({children}) => (
  <div>
    <div>header</div>
    <div>{children}</div>
    <div>footer</div>
  </div>
);

const App = ({name}) => <div>Hello {name}</div>;

const WrappedApp = ({name}) => (
  <Wrapper>
    <App name={name}/>
  </Wrapper>
);

render(<WrappedApp name="toto"/>,node);

এটি transclusionকৌণিক হিসাবেও পরিচিত ।

childrenপ্রতিক্রিয়াটির একটি বিশেষ প্রপ এবং এটি আপনার উপাদানগুলির ট্যাগগুলির ভিতরে যা রয়েছে তা অন্তর্ভুক্ত থাকবে (এখানে <App name={name}/>ভিতরে রয়েছে Wrapper, তাই এটিchildren

মনে রাখবেন যে আপনার অগত্যা ব্যবহারের প্রয়োজন নেই childrenযা কোনও উপাদানগুলির জন্য অনন্য এবং আপনি চাইলে সাধারণ প্রপগুলিও ব্যবহার করতে পারেন বা প্রপস এবং শিশুদের মিশ্রণ করতে পারেন:

const AppLayout = ({header,footer,children}) => (
  <div className="app">
    <div className="header">{header}</div>
    <div className="body">{children}</div>
    <div className="footer">{footer}</div>
  </div>
);

const appElement = (
  <AppLayout 
    header={<div>header</div>}
    footer={<div>footer</div>}
  >
    <div>body</div>
  </AppLayout>
);

render(appElement,node);

এটি অনেকগুলি ব্যবহারের ক্ষেত্রে সহজ এবং সূক্ষ্ম এবং আমি বেশিরভাগ ভোক্তা অ্যাপ্লিকেশানের জন্য এটির পরামর্শ দিই।

প্রপস রেন্ডার

কোনও উপাদানকে রেন্ডার ফাংশনগুলি সরবরাহ করা সম্ভব, এই প্যাটার্নটি সাধারণত বলা হয় render propএবং childrenপ্রপাকটি প্রায়শই সেই কলব্যাক সরবরাহ করতে ব্যবহৃত হয়।

এই প্যাটার্নটি সত্যিই বিন্যাসের জন্য বোঝানো হয়নি। মোড়কের উপাদানটি সাধারণত কিছু স্থিতি ধরে রাখতে ও পরিচালনা করতে এবং এর রেন্ডার ফাংশনগুলিতে ইনজেক্ট করতে ব্যবহৃত হয়।

পাল্টা উদাহরণ:

const Counter = () => (
  <State initial={0}>
    {(val, set) => (
      <div onClick={() => set(val + 1)}>  
        clicked {val} times
      </div>
    )}
  </State>
);

আপনি আরও অভিনব এবং এমনকি একটি অবজেক্ট প্রদান করতে পারেন

<Promise promise={somePromise}>
  {{
    loading: () => <div>...</div>,
    success: (data) => <div>{data.something}</div>,
    error: (e) => <div>{e.message}</div>,
  }}
</Promise>

নোট করুন আপনার অগত্যা ব্যবহার করার প্রয়োজন নেই children, এটি স্বাদ / এপিআইয়ের বিষয়।

<Promise 
  promise={somePromise}
  renderLoading={() => <div>...</div>}
  renderSuccess={(data) => <div>{data.something}</div>}
  renderError={(e) => <div>{e.message}</div>}
/>

আজকের হিসাবে, অনেক লাইব্রেরি রেন্ডার প্রপস ব্যবহার করছে (প্রতিক্রিয়া প্রসঙ্গে, প্রতিক্রিয়া-গতি, অ্যাপোলো ...) কারণ লোকেরা এইপিআইটির এইচওসি-র চেয়ে আরও সহজ খুঁজে পেতে পারে। রিঅ্যাক্ট-পাওয়ারপ্লাগ হ'ল সরল রেন্ডার-প্রোপ উপাদানগুলির একটি সংগ্রহ। প্রতিক্রিয়া-গ্রহণ আপনাকে রচনা করতে সহায়তা করে।

উচ্চতর-আদেশের উপাদানগুলি (এইচওসি)।

const wrapHOC = (WrappedComponent) => {
  class Wrapper extends React.PureComponent {
    render() {
      return (
        <div>
          <div>header</div>
          <div><WrappedComponent {...this.props}/></div>
          <div>footer</div>
        </div>
      );
    }  
  }
  return Wrapper;
}

const App = ({name}) => <div>Hello {name}</div>;

const WrappedApp = wrapHOC(App);

render(<WrappedApp name="toto"/>,node);

একটি উচ্চ-অর্ডার উপাদান / এইচওসি সাধারণত একটি ফাংশন যা কোনও উপাদান নেয় এবং একটি নতুন উপাদান দেয় returns

উচ্চতর-অর্ডার উপাদান ব্যবহার করা childrenবা ব্যবহারের চেয়ে আরও বেশি পারফরম্যান্স হতে পারে render props, কারণ মোড়কটির সাথে রেন্ডারিংয়ের এক ধাপ এগিয়ে শর্ট সার্কিট করার ক্ষমতা থাকতে পারে shouldComponentUpdate।

এখানে আমরা ব্যবহার করছি PureComponent। অ্যাপটি পুনরায় রেন্ডারিংয়ের WrappedAppসময়, সময়ের সাথে সাথে যদি নামের প্রপ পরিবর্তন হয় না, তবে মোড়কের কাছে "আমার রেন্ডার করার দরকার নেই কারণ প্রপস (আসলে, নামটি) আগের মত একই ছিল" say childrenউপরোক্ত ভিত্তিক সমাধানের সাথে , এমনকি মোড়ক থাকলেও PureComponent, এটি এমনটি নয় কারণ পিতামাতার রেন্ডারগুলির সময়কালে বাচ্চাদের উপাদানটি পুনরায় তৈরি করা হয়, যার অর্থ মোড়কযুক্ত উপাদানটি শুদ্ধ থাকলেও মোড়ক সম্ভবত সর্বদা পুনরায় রেন্ডার করে। একটি ব্যাবেল প্লাগইন রয়েছে যা এটি হ্রাস করতে এবং childrenসময়ের সাথে একটি ধ্রুবক উপাদান নিশ্চিত করতে সহায়তা করে ।

উপসংহার

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

এটি পড়ার পরে আপনার পুরো কোডবেসটি HOC এ স্থানান্তর করবেন না। কেবল মনে রাখবেন যে আপনার অ্যাপ্লিকেশনটির গুরুতর পথে আপনি পারফরম্যান্সের কারণে রানটাইম মোড়কের পরিবর্তে এইচওসি ব্যবহার করতে চাইতে পারেন, বিশেষত যদি একই মোড়কটিকে অনেকবার ব্যবহার করা হয় তবে এটিকে এইচওসি হিসাবে বিবেচনা করা উপযুক্ত।

রেডাক্স প্রথমে একটি রানটাইম মোড়ক ব্যবহার করে <Connect>এবং পরে connect(options)(Comp)কার্যকারণের কারণে এইচওসি-তে স্যুইচ করা হয় (ডিফল্টরূপে, মোড়ক বিশুদ্ধ এবং ব্যবহারযোগ্য shouldComponentUpdate)। এই উত্তরে আমি যেটি হাইলাইট করতে চেয়েছিলাম তার এটি নিখুঁত চিত্রণ।

নোট করুন যদি কোনও উপাদানটির রেন্ডার-প্রোপ এপিআই থাকে, তবে তার উপরে একটি এইচওসি তৈরি করা সাধারণত সহজ, সুতরাং আপনি যদি কোনও লিবিব লেখক হন তবে আপনাকে প্রথমে রেন্ডার প্রোপ এপিআই লিখতে হবে এবং শেষ পর্যন্ত একটি এইচওসি সংস্করণ সরবরাহ করা উচিত। অ্যাপোলো <Query>রেন্ডার-প্রোপ উপাদানটি graphqlব্যবহার করে এবং এইচওসি এটি ব্যবহার করে।

ব্যক্তিগতভাবে, আমি উভয়ই ব্যবহার করি তবে সন্দেহ হলে আমি এইচওসিগুলিকে পছন্দ করি কারণ:

প্রপস compose(hoc1,hoc2)(Comp)রেন্ডার তুলনায় এগুলি রচনা করা আরও মূ more়
এটি আমার আরও ভাল পারফরম্যান্স দিতে পারে
আমি এই স্টাইল প্রোগ্রামিংয়ের সাথে পরিচিত

আমি আমার পছন্দসই সরঞ্জামগুলির HOC সংস্করণ ব্যবহার / তৈরি করতে দ্বিধা করি না:

প্রতিক্রিয়া Context.Consumerকমপ্লেক্স
unstated এর Subscribe
ব্যবহার graphqlঅ্যাপোলোর পরিকল্পিত পরিবর্তে Queryঠেকনা রেন্ডার

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

— সেবাস্তিয়ান লরবার
সূত্র

এই পদ্ধতির সাহায্যে শিশুদের ডোন কম্পোনেন্টগুলি (এই ক্ষেত্রে হ্যালো) কমিয়ে দেওয়া সহজ হয়। প্রতিক্রিয়া 0.14 থেকে। * এরপরে শিশুদের উপাদানগুলির কাছে প্রপসগুলি পাস করার একমাত্র উপায় হ'ল React.createClone ব্যবহার করা, যা ব্যয়বহুল হতে পারে।

— মুকেশ সনি

প্রশ্ন: উত্তরে "আরও ভাল পারফরম্যান্স" উল্লেখ করা হয়েছে - যা আমি বুঝতে পারি না: কোন অন্যান্য সমাধানের তুলনায় ভাল?

— ফিলিপ

রানটাইম মোড়কের তুলনায় এইচওসিগুলির আরও ভাল পারফরম্যান্স থাকতে পারে, কারণ তারা রেন্ডারিংয়ের আগে শর্ট সার্কিট করতে পারে।

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

ধন্যবাদ! এটি এমন যে আপনি আমার মাসের শব্দগুলি গ্রহণ করেছেন তবে আপনি তাদেরকে আরও বেশি দক্ষতার সাথে প্রকাশ করেছেন

— Mac

এটি আরও ভাল উত্তর:] ধন্যবাদ!

— কালানরোকস

সোফির উত্তর ছাড়াও, আমি শিশু উপাদান উপাদান প্রেরণেও এরকম কিছু করে ব্যবহার করার একটি ব্যবহার পেয়েছি:

var ListView = React.createClass({
    render: function() {
        var items = this.props.data.map(function(item) {
            return this.props.delegate({data:item});
        }.bind(this));
        return <ul>{items}</ul>;
    }
});

var ItemDelegate = React.createClass({
    render: function() {
        return <li>{this.props.data}</li>
    }
});

var Wrapper = React.createClass({    
    render: function() {
        return <ListView delegate={ItemDelegate} data={someListOfData} />
    }
});

— Krs
সূত্র

আমি এখানে কোনও ডকুমেন্টেশন দেখিনি delegate, আপনি এটি কীভাবে খুঁজে পেয়েছেন?

— এনভিআই

আপনি কোনও উপাদানগুলিতে যা কিছু প্রপস যুক্ত করতে পারেন এবং তাদের নাম হিসাবে আপনি চান হিসাবে নাম লিখতে পারেন, এই সারণি 4 এ এই.পড়গুলি.ডিলেগেট ব্যবহার করে তবে কেবল এর নামও রেখে যেতে পারেন অন্যরকম।

— কেআরএস

React.js: একটি উপাদানকে অন্য জড়ো করে

ব্যবহার children

প্রপস রেন্ডার

উচ্চতর-আদেশের উপাদানগুলি (এইচওসি)।

উপসংহার

ব্যবহার `children`