উদাহরণ সহ আরও সাম্প্রতিক উত্তর, যা ব্যবহার করে React.useState
রাষ্ট্রকে প্যারেন্ট উপাদানগুলিতে রাখাই প্রস্তাবিত উপায়। পিতা-মাতার এটিতে অ্যাক্সেস থাকা দরকার কারণ এটি দুটি সন্তানের উপাদান জুড়ে এটি পরিচালনা করে। সফটওয়্যার ইঞ্জিনিয়ারিংয়ের ক্ষেত্রে সাধারণের তুলনায় গ্লোবাল ভেরিয়েবলের চেয়ে খারাপ কারণ একই কারণেই রেডাক্স পরিচালিত একটি হিসাবে এটি বিশ্বব্যাপী রাজ্যে স্থানান্তরিত করার প্রস্তাব দেওয়া হয় না ।
যখন রাজ্য প্যারেন্ট উপাদানগুলিতে থাকে তবে পিতা-মাতা যদি বাচ্চা valueএবং onChangeহ্যান্ডলারকে প্রপস দেয় (কখনও কখনও এটিকে মান লিঙ্ক বা রাষ্ট্রের লিঙ্কের প্যাটার্ন বলা হয় ) বাচ্চা এটিকে পরিবর্তন করতে পারে । আপনি এখানে হুক দিয়ে কীভাবে করবেন তা এখানে:
function Parent() {
var [state, setState] = React.useState('initial input value');
return <>
<Child1 value={state} onChange={(v) => setState(v)} />
<Child2 value={state}>
</>
}
function Child1(props) {
return <input
value={props.value}
onChange={e => props.onChange(e.target.value)}
/>
}
function Child2(props) {
return <p>Content of the state {props.value}</p>
}
পুরো প্যারেন্ট উপাদানটি সন্তানের ইনপুট পরিবর্তনের জন্য পুনরায় রেন্ডার করবে, যা পিতামন্ডলের উপাদানটি ছোট / দ্রুত রেন্ডার করতে দ্রুত হয় তবে এটি কোনও সমস্যা নয়। প্যারেন্ট উপাদানগুলির পুনঃ-রেন্ডার কার্যকারিতা এখনও সাধারণ ক্ষেত্রে একটি সমস্যা হতে পারে (উদাহরণস্বরূপ বড় আকারগুলি)। এটি আপনার ক্ষেত্রে সমস্যার সমাধান হয় (নীচে দেখুন)।
রাষ্ট্রের লিঙ্কের ধরণ এবং কোনও পিতামাতার পুনঃ-রেন্ডার হুকস্টেটের মতো তৃতীয় পক্ষের লাইব্রেরি ব্যবহার করে প্রয়োগ করা আরও সহজ - React.useStateআপনার ব্যবহারকারীর সহ বিভিন্ন ব্যবহারের কেস কভার করতে সুপারচার্জ করা। (অস্বীকৃতি: আমি প্রকল্পের একজন লেখক)।
হুকস্টেটের সাথে এটি দেখতে কেমন হবে তা এখানে। Child1ইনপুট পরিবর্তন করবে, Child2এতে প্রতিক্রিয়া জানাবে।Parentরাষ্ট্রকে ধরে রাখবে তবে কেবলমাত্র Child1এবং Child2হবে রাষ্ট্র পরিবর্তনকে পুনরায় রেন্ডার করবে না ।
import { useStateLink } from '@hookstate/core';
function Parent() {
var state = useStateLink('initial input value');
return <>
<Child1 state={state} />
<Child2 state={state}>
</>
}
function Child1(props) {
// to avoid parent re-render use local state,
// could use `props.state` instead of `state` below instead
var state = useStateLink(props.state)
return <input
value={state.get()}
onChange={e => state.set(e.target.value)}
/>
}
function Child2(props) {
// to avoid parent re-render use local state,
// could use `props.state` instead of `state` below instead
var state = useStateLink(props.state)
return <p>Content of the state {state.get()}</p>
}
পিএস: এখানে আরও অনেক উদাহরণ রয়েছে যেমন গভীরভাবে নেস্টেড ডেটা, রাষ্ট্রীয় বৈধতা, setStateহুক সহ গ্লোবাল স্টেট ইত্যাদি অন্তর্ভুক্ত এবং আরও জটিল পরিস্থিতিগুলি জুড়ে রয়েছে এখানে অনলাইনে সম্পূর্ণ নমুনা প্রয়োগ রয়েছে , যা হুকস্টেট এবং উপরে বর্ণিত কৌশলটি ব্যবহার করে।
