React.js এ প্যারেন্ট উপাদানগুলিতে প্রপসগুলি পাস করুন


295

propsReact.js এ, ইভেন্টগুলি ব্যবহার করে কোনও সন্তানের তার পিতামাতার কাছে যাওয়ার কোনও সহজ উপায় নেই?

var Child = React.createClass({
  render: function() {
    <a onClick={this.props.onClick}>Click me</a>
  }
});

var Parent = React.createClass({
  onClick: function(event) {
    // event.component.props ?why is this not available?
  },
  render: function() {
    <Child onClick={this.onClick} />
  }
});

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

সম্ভবত ইভেন্টের সাথে উপাদানটি বেঁধে দেওয়ার কোনও উপায় আছে?

আপডেট - 9/1/2015

এক বছরের জন্য প্রতিক্রিয়া দেখায়, আর সেবাস্টিয় Lorber এর উত্তর দ্বারা উত্সাহিত ব্যবহার পর, আমি হয় বাবা ফাংশন আর্গুমেন্ট হিসাবে সন্তান উপাদান ক্ষণস্থায়ী পর্যবসিত থাকেন না আসলে পথ প্রতিক্রিয়া, না এটা কি কখনও একটি ভাল ধারণা ছিল। আমি উত্তরটি পরিবর্তন করেছি।


অনুরূপ সমস্যার বিভিন্ন উত্তর রয়েছে ( এখানে এবং এখানে ) তবে এগুলির
কোনওটিই

আমি সম্মত - শৃঙ্খলাবদ্ধভাবে ঘটনাগুলি পাস করা দুর্দান্ত, তবে কোন উপাদানটি ইভেন্টটির সূচনা করেছিল তা নিশ্চিত করেই অবাক হতে হবে।
কেন্ডলবি

দয়া করে আমার উত্তরগুলি একবার দেখুন, আমি যেমন মনে করি গৃহীত উত্তরগুলি যথেষ্ট ভাল নয়; stackoverflow.com/a/31756470/82609
সেবাস্তিয়ান লরবার

1
কিট এন 'কাবুদল - সমস্ত কিছু অন্তর্ভুক্ত করার জন্য। সমস্ত ঘন্টা এবং হুইসেল পেতে। কম্বোনেশন। urbandictionary.com/define.php?term=kit%20and%20caboodle
ফিলিপ Bartuzi

উত্তর:


268

সম্পাদনা করুন : ES6 আপডেট হওয়া উদাহরণগুলির জন্য শেষের উদাহরণগুলি দেখুন।

এই উত্তরটি সরাসরি পিতামাতার এবং সন্তানের সম্পর্কের ক্ষেত্রে পরিচালনা করে। যখন পিতামাতা এবং সন্তানের সম্ভাব্য পরিমাণে মধ্যস্থতা থাকে তখন এই উত্তরটি দেখুন

অন্যান্য সমাধানের বিন্দুটি অনুপস্থিত

তারা এখনও দুর্দান্ত কাজ করার সময়, অন্যান্য উত্তরগুলি খুব গুরুত্বপূর্ণ কিছু অনুপস্থিত।

React.js এ, ইভেন্টগুলি ব্যবহার করে কোনও সন্তানের প্রপস তার পিতামাতার কাছে দেওয়ার কী সহজ উপায় নেই?

পিতা-মাতার ইতিমধ্যে সেই সন্তানের প্রপ! : যদি সন্তানের কোনও প্রপ থাকে তবে তার পিতামাতারা সেই প্রস্তাবটি সন্তানের সরবরাহ করে বলে! আপনি কেন চান চান যে সন্তানের সেই প্রস্তাবটি পিতামাতার কাছে ফেরত দেওয়া উচিত, যখন পিতামাতার স্পষ্টতই সেই প্রস্তাব রয়েছে?

আরও ভাল বাস্তবায়ন

শিশু : আসলে এর চেয়ে জটিল কিছু হওয়ার দরকার নেই।

var Child = React.createClass({
  render: function () {
    return <button onClick={this.props.onClick}>{this.props.text}</button>;
  },
});

একক সন্তানের সাথে পিতামাতা : মানটি ব্যবহার করে এটি সন্তানের কাছে যায়

var Parent = React.createClass({
  getInitialState: function() {
     return {childText: "Click me! (parent prop)"};
  },
  render: function () {
    return (
      <Child onClick={this.handleChildClick} text={this.state.childText}/>
    );
  },
  handleChildClick: function(event) {
     // You can access the prop you pass to the children 
     // because you already have it! 
     // Here you have it in state but it could also be
     //  in props, coming from another parent.
     alert("The Child button text is: " + this.state.childText);
     // You can also access the target of the click here 
     // if you want to do some magic stuff
     alert("The Child HTML is: " + event.target.outerHTML);
  }
});

JsFiddle

বাচ্চাদের তালিকার পিতা বা মাতা: আপনার এখনও পিতামাতার কাছে আপনার যা কিছু প্রয়োজন তা আছে এবং বাচ্চাকে আরও জটিল করার দরকার নেই।

var Parent = React.createClass({
  getInitialState: function() {
     return {childrenData: [
         {childText: "Click me 1!", childNumber: 1},
         {childText: "Click me 2!", childNumber: 2}
     ]};
  },
  render: function () {
    var children = this.state.childrenData.map(function(childData,childIndex) {
        return <Child onClick={this.handleChildClick.bind(null,childData)} text={childData.childText}/>;
    }.bind(this));
    return <div>{children}</div>;
  },

  handleChildClick: function(childData,event) {
     alert("The Child button data is: " + childData.childText + " - " + childData.childNumber);
     alert("The Child HTML is: " + event.target.outerHTML);
  }
});

JsFiddle

এটি ব্যবহার this.handleChildClick.bind(null,childIndex)এবং তারপরেও ব্যবহার সম্ভবthis.state.childrenData[childIndex]

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

অন্যান্য উত্তরের এনক্যাপসুলেশন এবং সংযোগ সম্পর্কে

এই মিলন এবং encapsulation এর ক্ষেত্রে আমার কাছে একটি খারাপ ধারণা:

var Parent = React.createClass({
  handleClick: function(childComponent) {
     // using childComponent.props
     // using childComponent.refs.button
     // or anything else using childComponent
  },
  render: function() {
    <Child onClick={this.handleClick} />
  }
});

প্রপস ব্যবহার করে : যেমন আমি উপরে ব্যাখ্যা করেছি, আপনার পিতামাতায় ইতিমধ্যে প্রপস রয়েছে তাই প্রপসগুলিতে অ্যাক্সেসের জন্য পুরো সন্তানের উপাদানটি পাস করা অকেজো।

রেফ ব্যবহার করে : ইভেন্টটিতে আপনার কাছে ইতিমধ্যে ক্লিক লক্ষ্য রয়েছে এবং বেশিরভাগ ক্ষেত্রে এটি যথেষ্ট this অতিরিক্তভাবে, আপনি সরাসরি সন্তানের উপর একটি রেফ ব্যবহার করতে পারতেন:

<Child ref="theChild" .../>

এবং এর সাথে পিতামাতার DOM নোডে অ্যাক্সেস করুন

React.findDOMNode(this.refs.theChild)

আরও উন্নত ক্ষেত্রে যেখানে আপনি পিতামাতায় সন্তানের একাধিক রেফ অ্যাক্সেস করতে চান সেখানে শিশু কলব্যাকের মাধ্যমে সমস্ত ডম নোড সরাসরি পাস করতে পারে।

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

সমস্যাটি চিত্রিত করার জন্য, আমি শ্যাডো ডিওএম সম্পর্কে এই উদ্ধৃতিটি নিয়ে যাব , যা ব্রাউজারগুলির অভ্যন্তরে স্লাইডার, স্ক্রোলবার, ভিডিও প্লেয়ারগুলির মতো জিনিসগুলি রেন্ডার করতে ব্যবহৃত হয় ...:

তারা আপনার, ওয়েব বিকাশকারী পৌঁছাতে পারে এবং বাস্তবায়নের বিশদটি কী বিবেচনা করে তার মধ্যে একটি সীমানা তৈরি করেছিল, এভাবে আপনার কাছে অ্যাক্সেসযোগ্য। ব্রাউজারটি অবশ্য ইচ্ছামতো এই সীমানা পেরিয়ে যেতে পারে। এই সীমানাটি স্থানে রাখার সাথে সাথে, তারা আপনার মতো ডিভগুলি এবং স্প্যানগুলির বাইরে একই ভাল পুরাতন ওয়েব প্রযুক্তি ব্যবহার করে সমস্ত HTML উপাদান তৈরি করতে সক্ষম হয়েছিল।

সমস্যাটি হ'ল যদি আপনি সন্তানের প্রয়োগের বিবরণগুলি পিতামাতার মধ্যে ফাঁস করতে দেন তবে আপনি পিতামাতার উপর প্রভাব না ফেলে সন্তানের রিফ্যাক্টর করা খুব কঠিন করে তোলেন। এর অর্থ লাইব্রেরি লেখক হিসাবে (বা শ্যাডো ডম সহ ব্রাউজার সম্পাদক হিসাবে) এটি অত্যন্ত বিপজ্জনক কারণ আপনি ক্লায়েন্টকে অত্যধিক অ্যাক্সেস করতে দিয়েছিলেন, অতঃপর রেট্রোকম্প্যাটিবিলিটি না ভেঙে কোড আপগ্রেড করা খুব শক্ত করে তোলে।

যদি ক্রোম ক্লায়েন্টকে সেই স্ক্রোলবারের অভ্যন্তরীণ ডোম নোডগুলিতে অ্যাক্সেস করার অনুমতি দেয় তবে তার স্ক্রোলবারটি কার্যকর করা হয়েছিল, এর অর্থ হ'ল ক্লায়েন্টটি কেবল সেই স্ক্রোলবারটি ভেঙে ফেলার সম্ভাবনা থাকতে পারে এবং ক্রোম যখন রিফ্যাক্টর করার পরে ক্রোম তার অটো-আপডেট সম্পাদন করে তখন আরও সহজেই ব্রেক হয়ে যায় স্ক্রোলবার ... পরিবর্তে, তারা কেবল সিএসএসের সাহায্যে স্ক্রোলবারের কিছু অংশ কাস্টমাইজ করার মতো কিছু নিরাপদ জিনিসগুলিতে অ্যাক্সেস দেয়।

অন্য কিছু ব্যবহার সম্পর্কে

কলব্যাকের পুরো উপাদানটি পাস করা বিপজ্জনক এবং নবজাতক বিকাশকারীদের পিতামাতার অভ্যন্তরে কল করা childComponent.setState(...)বা childComponent.forceUpdate(), বা এটি নতুন ভেরিয়েবল নির্ধারণের মতো খুব অদ্ভুত কাজ করতে পরিচালিত করতে পারে , পুরো অ্যাপ্লিকেশনটির পক্ষে যুক্তি আরো শক্ত করে তোলে।


সম্পাদনা করুন: ES6 উদাহরণ

যেহেতু এখন অনেক লোক ES6 ব্যবহার করে, ES6 সিনট্যাক্সের জন্য এখানে একই উদাহরণ রয়েছে

শিশুটি খুব সহজ হতে পারে:

const Child = ({
  onClick, 
  text
}) => (
  <button onClick={onClick}>
    {text}
  </button>
)

পিতা বা মাতা হয় একটি বর্গ হতে পারে (এবং এটি শেষ পর্যন্ত রাষ্ট্র নিজেই পরিচালনা করতে পারে, তবে আমি এটিকে এখানে প্রপস হিসাবে পাস করছি:

class Parent1 extends React.Component {
  handleChildClick(childData,event) {
     alert("The Child button data is: " + childData.childText + " - " + childData.childNumber);
     alert("The Child HTML is: " + event.target.outerHTML);
  }
  render() {
    return (
      <div>
        {this.props.childrenData.map(child => (
          <Child
            key={child.childNumber}
            text={child.childText} 
            onClick={e => this.handleChildClick(child,e)}
          />
        ))}
      </div>
    );
  }
}

তবে রাষ্ট্র পরিচালনার প্রয়োজন না হলে এটি আরও সরল করা যেতে পারে:

const Parent2 = ({childrenData}) => (
  <div>
     {childrenData.map(child => (
       <Child
         key={child.childNumber}
         text={child.childText} 
         onClick={e => {
            alert("The Child button data is: " + child.childText + " - " + child.childNumber);
                    alert("The Child HTML is: " + e.target.outerHTML);
         }}
       />
     ))}
  </div>
)

JsFiddle


পারফ সতর্কতা (ES5 / ES6 এর জন্য প্রয়োগ করুন): আপনি যদি ব্যবহার করছেন PureComponentবা shouldComponentUpdate, উপরের প্রয়োগগুলি ডিফল্টরূপে অপ্টিমাইজ করা হবে না কারণ onClick={e => doSomething()}রেন্ডার পর্বের সময় ব্যবহার করা বা সরাসরি বাঁধাই করা হয়, কারণ এটি প্রতিবার পিতামাতার রেন্ডারগুলির সাথে একটি নতুন ফাংশন তৈরি করবে। এটি যদি আপনার অ্যাপ্লিকেশনটিতে একটি পারফরম্যান্স বাধা হয়ে থাকে, আপনি বাচ্চাদের কাছে ডেটা প্রেরণ করতে পারেন এবং এটিকে "স্থিতিশীল" কলব্যাকের অভ্যন্তরে পুনরায় সঞ্চার করতে পারেন (প্যারেন্ট ক্লাসে সেট করুন, এবং thisক্লাস কনস্ট্রাক্টরের সাথে আবদ্ধ ) যাতে PureComponentঅপ্টিমাইজেশানটি লাথি মারতে পারে, বা আপনি shouldComponentUpdateপ্রপস তুলনা পরীক্ষায় আপনার নিজের প্রয়োগ করতে এবং কলব্যাক উপেক্ষা করতে পারে।

আপনি আবার রিকম্পোজ লাইব্রেরিও ব্যবহার করতে পারেন , যা সূক্ষ্ম সুরযুক্ত অপ্টিমাইজেশানগুলি অর্জন করতে উচ্চতর অর্ডার উপাদান সরবরাহ করে:

// A component that is expensive to render
const ExpensiveComponent = ({ propA, propB }) => {...}

// Optimized version of same component, using shallow comparison of props
// Same effect as React's PureRenderMixin
const OptimizedComponent = pure(ExpensiveComponent)

// Even more optimized: only updates if specific prop keys have changed
const HyperOptimizedComponent = onlyUpdateForKeys(['propA', 'propB'])(ExpensiveComponent)

এই ক্ষেত্রে আপনি ব্যবহার করে শিশু উপাদানটি অনুকূল করতে পারেন:

const OptimizedChild = onlyUpdateForKeys(['text'])(Child)

1
হ্যাঁ, প্রতিক্রিয়া ব্যবহার করে গত বছরটি কাটিয়েছি, আমি সম্মত - ফাংশনগুলির মাধ্যমে চারপাশে তাত্ক্ষণিক উপাদানগুলি পাস করার কোনও ভাল কারণ নেই। আমি আমার নিজের উত্তর হ্রাস করতে চলেছি। আমি সম্ভবত কিছু সংশোধন করে উত্তরটিও স্যুইচ করতে ইচ্ছুক: আপনার "আরও ভাল প্রয়োগ" এই প্রশ্নের উত্থাপিত আসল কারণটির সমাধান করে না, এটি হ'ল "আমি কীভাবে জানব যে আমার বাচ্চাদের মধ্যে কোন একটি দলের মধ্যে বেছে নেওয়া হয়েছিল?" যে কোনও শালীন আকারের অ্যাপ্লিকেশনটির জন্য ফ্লাক্সই উত্তর, তবে ছোট অ্যাপ্লিকেশনগুলিতে আমি কোনও ক্রিয়াকলাপের মাধ্যমে কল চেইনের ব্যাকআপ দিয়ে মানগুলি (উপাদানগুলি নয়) পাস করে নেওয়া ভাল props। একমত?
KendallB

@ কেন্ডালবি খুশি যে আপনি আমার উত্তরটির সাথে একমত হয়েছেন :) How do I know which of my children was chosen among a group?এটি আসলেই মূল প্রশ্নের অংশ নয়, তবে আমি আমার উত্তরটিতে সমাধানটি অন্তর্ভুক্ত করেছি। আপনার সম্পাদনার বিপরীতে, আমি মনে করি কোনও তালিকার সাথে কাজ করার সময়ও শিশুটিকে মোটেও সংশোধন করার প্রয়োজন নেই, কারণ আপনি bindসরাসরি পিতামাতার মধ্যে ব্যবহার করতে পারেন ।
সেবাস্তিয়ান লরবার

আমি আপনার উত্তরে একটি সম্পাদনা করেছি, রেফসের অংশ। omerwimar.com/posts/react-getdomnode-rep
বাস্ত-

হাই @ শেবাস্টিয়েনলবার আমি ভবিষ্যত থেকে আসছি। অটোবাইন্ডিং সম্পর্কে এই লাইনটি onClick={this.handleChildClick.bind(null,childData)}সম্পর্কে আপনি উল্লেখ করেছেন যে প্রতিক্রিয়াটি ক্লাস মডেলটিতে অন্তর্ভুক্ত হয়নি এটি এখনই প্রযোজ্য । আমি প্রচুর স্টাফ পড়েছি কিন্তু এই অংশটি এখনও আমাকে বিভ্রান্ত করে। আমি ES6 ব্যবহার করছি প্রণালী দ্বারা, তাই আমি পরিবর্তিত করতে এবং আমার কোড এখনও কাজে বলে মনে হচ্ছে। আপনি কীভাবে আপনার কোডটির সেই অংশটি ES6 শৈলীতে অনুবাদ করবেন? class modelnullthis
জনিকিউ

আমি সর্বশেষ প্রতিক্রিয়াতে এই কাজটি করার জন্যও লড়াই করছি, কী পরিবর্তন দরকার?
হুসেন ডুভিগনাউ

143

আপডেট (9/1/15): ওপি এই প্রশ্নটিকে কিছুটা চলমান লক্ষ্য তৈরি করেছে। এটি আবার আপডেট করা হয়েছে। সুতরাং, আমি আমার উত্তর আপডেট করতে দায়বদ্ধ বোধ করি।

প্রথমত, আপনার সরবরাহিত উদাহরণের একটি উত্তর:

হ্যাঁ, এটি সম্ভব।

আপনি সন্তান এর আপডেট করার মাধ্যমে এই সমাধান করতে পারে onClickহতে this.props.onClick.bind(null, this):

var Child = React.createClass({
  render: function () {
    return <a onClick={this.props.onClick.bind(null, this)}>Click me</a>;
  }
});

আপনার পিতামাতার ইভেন্ট হ্যান্ডলারটি এরপরে উপাদান এবং ইভেন্টটি অ্যাক্সেস করতে পারে:

  onClick: function (component, event) {
    // console.log(component, event);
  },

জেএসবিন স্ন্যাপশট


তবে প্রশ্নটি নিজেই বিভ্রান্তিমূলক

পিতামাতাই ইতিমধ্যে সন্তানের জানেন props

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

var Child = React.createClass({
  render: function () {
    return <a onClick={this.props.onClick}> {this.props.text} </a>;
  }
});

var Parent = React.createClass({
  getInitialState: function () {
    return { text: "Click here" };
  },
  onClick: function (event) {
    // event.component.props ?why is this not available? 
  },
  render: function() {
    return <Child onClick={this.onClick} text={this.state.text} />;
  }
});

এই উদাহরণে এটি আরও পরিষ্কার হয়ে যায় যে আপনি ইতিমধ্যে জানেন যে সন্তানের প্রপসগুলি কী।

জেএসবিন স্ন্যাপশট


যদি এটি কোনও সন্তানের প্রপস ব্যবহারের বিষয়ে সত্যই হয় ...

যদি এটি সত্যিকার অর্থে কোনও সন্তানের প্রপস ব্যবহার করার বিষয়ে হয় তবে আপনি পুরোপুরি সন্তানের সাথে কোনও হুকআপ এড়াতে পারবেন।

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

var Child = React.createClass({
  render: function () {
    return <a {...this.props}> {this.props.text} </a>;
  }
});

আপনাকে প্যারেন্টে সরাসরি মানগুলি ব্যবহার করতে দিচ্ছে:

var Parent = React.createClass({
  getInitialState: function () {
    return { text: "Click here" };
  },
  onClick: function (text) {
    alert(text);
  },
  render: function() {
    return <Child onClick={this.onClick.bind(null, this.state.text)} text={this.state.text} />;
  }
});

জেএসবিন স্ন্যাপশট


আপনি অতিরিক্ত শিশু উপাদান হুকআপ করায় কোনও অতিরিক্ত কনফিগারেশন নেই

var Parent = React.createClass({
  getInitialState: function () {
    return {
      text: "Click here",
      text2: "No, Click here",
    };
  },
  onClick: function (text) {
    alert(text);
  },
  render: function() {
    return <div>
      <Child onClick={this.onClick.bind(null, this.state.text)} text={this.state.text} />
      <Child onClick={this.onClick.bind(null, this.state.text2)} text={this.state.text2} />
    </div>;
  }
});

জেএসবিন স্ন্যাপশট

তবে আমি সন্দেহ করি যে এটি আপনার আসল ব্যবহারের ক্ষেত্রে নয়। সুতরাং আসুন আরও খনন করা যাক ...


একটি দৃ practical় বাস্তব উদাহরণ

প্রদত্ত উদাহরণের জেনেরিক প্রকৃতি সম্পর্কে কথা বলা শক্ত। আমি এমন একটি উপাদান তৈরি করেছি যা উপরের প্রশ্নের জন্য ব্যবহারিক ব্যবহারকে প্রদর্শন করে, খুব কার্যকরভাবে প্রয়োগ করা হয়েছে :

ডিটিএস সার্ভিসক্যালকুলেটর কাজের উদাহরণ
ডিটিএস সার্ভিসক্যালকুলেটর রেপো

এই উপাদানটি একটি সাধারণ পরিষেবা ক্যালকুলেটর। আপনি এটিকে পরিষেবার একটি তালিকা সরবরাহ করুন (নাম এবং দাম সহ) এবং এটি মোট নির্বাচিত দাম গণনা করবে।

বাচ্চারা আনন্দের সাথে অজ্ঞ

ServiceItemএই উদাহরণে শিশু উপাদান। বাইরের বিশ্ব সম্পর্কে এর অনেক মতামত নেই। এর জন্য কয়েকটি প্রপস প্রয়োজন , যার একটিতে ক্লিক করা হলে ডাকা একটি ফাংশন।

<div onClick={this.props.handleClick.bind(this.props.index)} />

handleClickসরবরাহকৃত index[ উত্স ] এর সাথে প্রদত্ত কলব্যাক কল করা ছাড়া এটি কিছুই করে না ।

পিতা-মাতা সন্তান

DTServicesCalculatorমূল-উপাদানটি হ'ল এই উদাহরণ। এটিও একটি শিশু। দেখা যাক।

DTServiceCalculatorশিশু-উপাদানগুলির একটি তালিকা তৈরি করে ServiceItemএবং তাদের প্রপস [ উত্স ] সরবরাহ করে। এটি এর পিতামাতা উপাদান ServiceItemকিন্তু এটি উপাদানটির সন্তানের উপাদানটিকে তালিকাটি প্রদান করে। এটি ডেটার মালিক নয়। সুতরাং এটি আবার এর প্যারেন্ট-উপাদান উত্সটিতে উপাদানটির পরিচালনা করার প্রতিনিধিত্ব করে

<ServiceItem chosen={chosen} index={i} key={id} price={price} name={name} onSelect={this.props.handleServiceItem} />

handleServiceItemসূচকটি ক্যাপচার করে, শিশু থেকে উত্তীর্ণ হয় এবং এটি তার পিতামাতাকে [ উত্স ] সরবরাহ করে

handleServiceClick (index) {
  this.props.onSelect(index);
}

মালিকরা সব জানেন

প্রতিক্রিয়াতে "মালিকানা" ধারণাটি একটি গুরুত্বপূর্ণ। আমি এখানে এটি সম্পর্কে আরও পড়ার পরামর্শ দিচ্ছি ।

আমি যে উদাহরণটি দেখিয়েছি, আমি রাষ্ট্রের মালিকানা উপাদানটি না পাওয়া অবধি উপাদান ইভেন্টের একটি ইভেন্ট হ্যান্ডলিংকে অর্পণ করি।

অবশেষে সেখানে পৌঁছে আমরা রাষ্ট্রের নির্বাচন / অনির্বাচনকে [ সূত্র ] এর মতো পরিচালনা করি :

handleSelect (index) {
  let services = […this.state.services];
  services[index].chosen = (services[index].chosen) ? false : true;
  this.setState({ services: services });
}


উপসংহার

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

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

পাশে: অ্যাপ্লিকেশনগুলিতে এই জাতীয় প্রয়োজনীয় হুকআপ হ্রাস করার জন্য ফ্লাক্স প্যাটার্ন হ'ল একটি ভাল উপায়।


সংক্ষিপ্ত উত্তরের জন্য ধন্যবাদ, এটি সত্যিই আমাকে আরও ভাল প্রতিক্রিয়া বুঝতে বুঝতে সহায়তা করেছে! একই লাইন বরাবর আমার একটি প্রশ্ন আছে। আমি পাব / সাব জন্য ফ্লাক্স ব্যবহার করছি। সন্তানের ইভেন্ট হ্যান্ডলারটি আপনার উদাহরণের মতো পিতামাতার কাছে পৌঁছে দেওয়ার পরিবর্তে এটি একটি 'ক্রিয়া' হিসাবে প্রয়োগ করা এবং এটির জন্য শুনানো সম্ভব। আপনি কি এটি একটি ভাল বিকল্প এবং ফ্লাক্স ব্যবহার বিবেচনা করবেন?
পাথসফডিজাইন

1
ধন্যবাদ @ প্যাথসোফডিজাইন! এটা নির্ভর করবে। ফ্লক্সের নিয়ামক-দর্শনগুলির এই ধারণাটি রয়েছে। এই উদাহরণে, Parentযেমন একটি নিয়ামক-দৃশ্য হতে পারে, যখন Childকেবল একটি বোবা-ভিউ (উপাদান)। শুধুমাত্র কন্ট্রোলার-দর্শনগুলির ক্ষেত্রে অ্যাপ্লিকেশনটির জ্ঞান থাকা উচিত। এই ক্ষেত্রে, আপনি কি এখনও অ্যাকশন থেকে পাস হবে Parentথেকে Childএকটি ঠেকনা হিসাবে। অ্যাকশন নিজেই উদ্বিগ্ন, ভিউগুলি আপডেট করার জন্য ক্রিয়াকলাপের মধ্যে ইন্টারঅ্যাক্ট করার জন্য ফ্লাকসের একটি দৃ prescribed়ভাবে নির্ধারিত প্যাটার্ন রয়েছে। ফেসবুক.
github.io/flux/docs/…

1
onClick={this.onClick.bind(null, this.state.text)}পিতামাতাকে যেমন রাজ্য বাঁধতে হবে না। সুতরাং ঠিক onClick={this.onClick}কাজ করবে। যেখানে onClick = ()=>{const text = this.state.text;..}পিতামাতায় আছেন
শিশির অরোরা

25

এটি একটি সহজ উত্তর আছে প্রদর্শিত হবে। এই বিবেচনা:

var Child = React.createClass({
  render: function() {
    <a onClick={this.props.onClick.bind(null, this)}>Click me</a>
  }
});

var Parent = React.createClass({
  onClick: function(component, event) {
    component.props // #=> {Object...}
  },
  render: function() {
    <Child onClick={this.onClick} />
  }
});

কীটি ইভেন্টটিতে কল bind(null, this)করছে this.props.onClick, পিতামাতার কাছ থেকে পাস হয়েছে passed এখন, onClick ফাংশন আর্গুমেন্ট গ্রহণ component, এবং event। আমি মনে করি এটি সমস্ত বিশ্বের সেরা।

আপডেট: 9/1/2015

এটি একটি খারাপ ধারণা ছিল: সন্তানের প্রয়োগের বিবরণগুলি পিতামাতার কাছে ফাঁস হওয়া কখনও ভাল পথ ছিল না। সেবাস্তিয়ান লরবারের উত্তর দেখুন।


আর্গুমেন্টগুলি ভুল উপায়ে রাখে না (স্থানগুলি বদলে নেওয়া হয়)?
সুরিকান

1
@ দ্য সুরিকান না এটি পুরোপুরি ঠিক আছে। প্রথম আর্গুমেন্টটি thisফাংশনটির মধ্যে আবদ্ধ (যা কোনওভাবেই প্রয়োজন হয় না), এবং দ্বিতীয়টি যখন অনক্লিক বলা হয় তখন প্রথম আর্গুমেন্ট হিসাবে চাপ দেওয়া হয়।
মনমল

13

প্রশ্নটি কীভাবে শিশু থেকে অভিভাবকের উপাদানগুলিতে যুক্তিটি পাস করবেন। এই উদাহরণটি ব্যবহার করা সহজ এবং পরীক্ষিত:

//Child component
class Child extends React.Component {
    render() {
        var handleToUpdate  =   this.props.handleToUpdate;
        return (<div><button onClick={() => handleToUpdate('someVar')}>Push me</button></div>
        )
    }
}

//Parent component
class Parent extends React.Component {
    constructor(props) {
        super(props);
        var handleToUpdate  = this.handleToUpdate.bind(this);
    }

    handleToUpdate(someArg){
        alert('We pass argument from Child to Parent: \n' + someArg);
    }

    render() {
        var handleToUpdate  =   this.handleToUpdate;
        return (<div>
          <Child handleToUpdate = {handleToUpdate.bind(this)} />
        </div>)
    }
}

if(document.querySelector("#demo")){
    ReactDOM.render(
        <Parent />,
        document.querySelector("#demo")
    );
}

JSFIDDLE দেখুন


আমার ক্ষেত্রে এটি কল () ক্লিকের কলব্যাক ফাংশনটি ভুলে যায়
লং

6

মূলত আপনি শিশু এবং পিতামাতার কাছে এবং তথ্য পাঠাতে প্রপস ব্যবহার করেন।

সমস্ত বিস্ময়কর উত্তর যুক্ত করে, আমি একটি সহজ উদাহরণ দিতে পারি যা শিশু থেকে অভিভাবকের উপাদানগুলিতে প্রতিক্রিয়ার মানগুলি ব্যাখ্যা করে

App.js

class App extends React.Component {
      constructor(){
            super();
            this.handleFilterUpdate = this.handleFilterUpdate.bind(this);
            this.state={name:'igi'}
      }
      handleFilterUpdate(filterValue) {
            this.setState({
                  name: filterValue
            });
      }
   render() {
      return (
        <div>
            <Header change={this.handleFilterUpdate} name={this.state.name} />
            <p>{this.state.name}</p>
        </div>
      );
   }
}

Header.js

class Header extends React.Component {
      constructor(){
            super();
            this.state={
                  names: 'jessy'
            }
      }
      Change(event) {

      // this.props.change(this.state.names);
      this.props.change('jessy');
  }

   render() {
      return (
       <button onClick={this.Change.bind(this)}>click</button>

      );
   }
}

Main.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

এটি এখন, আপনি নিজের ক্লায়েন্ট থেকে সার্ভারে মানগুলি পাস করতে পারেন।

Header.js এ পরিবর্তন ফাংশনটি একবার দেখুন

Change(event) {
      // this.props.change(this.state.names);
      this.props.change('jessy');
  }

আপনি ক্লায়েন্ট থেকে সার্ভারে প্রপসগুলিতে মানগুলি এইভাবে ঠেলে দেন


আমি জানতে পারি যে আপনি ক্লায়েন্ট থেকে সার্ভারে প্রপসগুলিতে মানগুলি কীভাবে
ঠেলাচ্ছেন

2

প্যারেন্ট কন্সট্রাক্টরে ফাংশন বন্ডিং ব্যবহার করে এখানে একটি সহজ 3 ধাপের ES6 বাস্তবায়ন। অফিসিয়াল প্রতিক্রিয়ার টিউটোরিয়ালটি এই প্রথম প্রস্তাব দেয় (এখানে পাবলিক ক্লাস ফিল্ডস সিনট্যাক্সও নেই) আপনি এই সমস্ত তথ্য এখানে পেতে পারেন https://reactjs.org/docs/handling-events.html

বাধ্যতামূলক পিতা-মাতার কাজগুলি যাতে শিশুরা তাদের কল করতে পারে (এবং পিতামাতার কাছে ডেটা পাস করুন!: ডি)

  1. প্যারেন্ট কন্সট্রাক্টরে আপনি প্যারেন্টে যে ফাংশনটি তৈরি করেছেন তা আপনি বেঁধে রাখুন তা নিশ্চিত করুন
  2. বাউন্ড ফাংশনটি সন্তানের কাছে প্রপ হিসাবে নিচে দিন (কোনও ল্যাম্বডা নয় কারণ আমরা কাজ করার জন্য একটি রেফ পাস করছি)
  3. একটি শিশু ইভেন্ট থেকে আবদ্ধ ফাংশনটি কল করুন (ল্যাম্বদা! ইভেন্টটি বহিষ্কার হওয়ার সময় আমরা ফাংশনটি কল করছি we আমরা যদি এটি না করি তবে ফাংশনটি স্বয়ংক্রিয়ভাবে লোডে চলে যাবে এবং ইভেন্টটিতে ট্রিগার হবে না))

মূল কার্য

handleFilterApply(filterVals){} 

অভিভাবক নির্মাতা

this.handleFilterApply = this.handleFilterApply.bind(this);

সন্তানের কাছে প্রপ পাস হয়েছে

onApplyClick = {this.handleFilterApply}

শিশু ইভেন্ট কল

onClick = {() => {props.onApplyClick(filterVals)}

0

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

ছোট উদাহরণ (এটি কোনও টিএসএক্স ফাইলগুলিতে রয়েছে, তাই প্রপস এবং রাজ্যগুলি অবশ্যই পুরোপুরি ঘোষণা করা উচিত, আমি কিছু যুক্তিকে উপাদানগুলির বাইরে মুছে ফেলেছি, সুতরাং এটি কম কোড)।

* আপডেট: কলব্যাকের সাথে এটি আবদ্ধ হওয়া গুরুত্বপূর্ণ, অন্যথায় কলব্যাকের সন্তানের সুযোগ রয়েছে, পিতামাতার নয়। কেবল সমস্যা: এটি "বৃদ্ধ" পিতামাতা ...

সিম্পটমচোসার পিতামাতা:

interface SymptomChooserState {
  // true when a symptom was pressed can now add more detail
  isInDetailMode: boolean
  // since when user has this symptoms
  sinceDate: Date,
}

class SymptomChooser extends Component<{}, SymptomChooserState> {

  state = {
    isInDetailMode: false,
    sinceDate: new Date()
  }

  helloParent(symptom: Symptom) {
    console.log("This is parent of: ", symptom.props.name);
    // TODO enable detail mode
  }

  render() {
    return (
      <View>
        <Symptom name='Fieber' callback={this.helloParent.bind(this)} />
      </View>
    );
  }
}

লক্ষণটি হ'ল শিশু (সন্তানের প্রপসগুলিতে আমি কলব্যাক ফাংশন ঘোষণা করি, ফাংশনে নির্বাচিত সিম্পটমকে কলব্যাক বলা হয়):

interface SymptomProps {
  // name of the symptom
  name: string,
  // callback to notify SymptomChooser about selected Symptom.
  callback: (symptom: Symptom) => void
}

class Symptom extends Component<SymptomProps, SymptomState>{

  state = {
    isSelected: false,
    severity: 0
  }

  selectedSymptom() {
    this.setState({ isSelected: true });
    this.props.callback(this);
  }

  render() {
    return (
      // symptom is not selected
      <Button
        style={[AppStyle.button]}
        onPress={this.selectedSymptom.bind(this)}>
        <Text style={[AppStyle.textButton]}>{this.props.name}</Text>
      </Button>
    );
  }
}
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.