আমি একটি স্ক্রিপ্ট লিখছি যা স্ক্রিনের ড্রপডাউন এবং ইনপুটের অবস্থানের উপর নির্ভর করে ইনপুটটির নীচে বা উপরে ড্রপডাউন সরায়। এছাড়াও আমি এর দিকনির্দেশ অনুসারে ড্রপডাউনতে মডিফায়ার সেট করতে চাই। কিন্তু ব্যবহার করছিsetState
তৈরির ভিতরেcomponentDidUpdate
করে অসীম লুপ তৈরি হয় (যা সুস্পষ্ট)
আমি ব্যবহার করার একটি সমাধান খুঁজে পেয়েছি getDOMNode
ক্লাস নামটি সরাসরি ড্রপডাউনটিতে এবং সেট করার তবে আমি মনে করি যে প্রতিক্রিয়া সরঞ্জামগুলি ব্যবহার করে এর চেয়ে আরও ভাল সমাধান হওয়া উচিত। কেউ কি আমাকে সাহায্য করতে পারেন?
এখানে getDOMNode
কোডিংয়ের একটি অংশ রয়েছে (কোডটি সহজ করার জন্য আইআইএল কিছুটা অবহেলিত অবস্থানের যুক্তি)
let SearchDropdown = React.createClass({
componentDidUpdate(params) {
let el = this.getDOMNode();
el.classList.remove('dropDown-top');
if(needToMoveOnTop(el)) {
el.top = newTopValue;
el.right = newRightValue;
el.classList.add('dropDown-top');
}
},
render() {
let dataFeed = this.props.dataFeed;
return (
<DropDown >
{dataFeed.map((data, i) => {
return (<DropDownRow key={response.symbol} data={data}/>);
})}
</DropDown>
);
}
});
এবং এখানে সেটসেট সহ কোড (যা একটি অসীম লুপ তৈরি করে)
let SearchDropdown = React.createClass({
getInitialState() {
return {
top: false
};
},
componentDidUpdate(params) {
let el = this.getDOMNode();
if (this.state.top) {
this.setState({top: false});
}
if(needToMoveOnTop(el)) {
el.top = newTopValue;
el.right = newRightValue;
if (!this.state.top) {
this.setState({top: true});
}
}
},
render() {
let dataFeed = this.props.dataFeed;
let class = cx({'dropDown-top' : this.state.top});
return (
<DropDown className={class} >
{dataFeed.map((data, i) => {
return (<DropDownRow key={response.symbol} data={data}/>);
})}
</DropDown>
);
}
});
componentDidUpdate
মধ্যে এই বেহালার ।
componentShouldUpdate
?
setState
করবে । একাধিকবার চেক করা এবং কল করার পরিবর্তে , আপনি কীভাবে স্থানীয় ভেরিয়েবলে থাকতে চান তা অনুসরণ করুন, তারপরে একবার কল শেষে আপনার স্থানীয় ভেরিয়েবলটি মেলে না । এখনই যেমন দাঁড়িয়েছে, তত্ক্ষণাত্ প্রথম পুনর্বার সরবরাহের পরে আপনি পুনরায় সেট করুন যা আপনাকে অসীম লুপে ফেলে।state.top
setState
state.top
componentDidUpdate
setState
state.top
state.top