সম্পাদনা করুন : 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)