মূলত, প্রপস এবং রাজ্য দুটি উপায় যা উপাদান জানতে পারে এবং কীভাবে রেন্ডার করতে হয়। অ্যাপ্লিকেশন রাষ্ট্রের কোন অংশটি রাষ্ট্রের অন্তর্গত এবং কোনটি শীর্ষ স্তরের স্টোরের সাথে সম্পর্কিত, কীভাবে প্রতিক্রিয়ার কাজ করে তার চেয়ে বেশি আপনার অ্যাপ্লিকেশন ডিজাইনের সাথে সম্পর্কিত। আইএমও সিদ্ধান্ত নেওয়ার সবচেয়ে সহজ উপায় হ'ল চিন্তা করা, এই নির্দিষ্ট তথ্যটির পুরো অংশ প্রয়োগের জন্য কার্যকর, বা এটি স্থানীয় কিছু তথ্য whether এছাড়াও, সদৃশ রাষ্ট্রটি নকল করা জরুরী, সুতরাং যদি প্রপস থেকে কিছু অংশের ডেটা গণনা করা যায় - তবে প্রপস থেকে এটি গণনা করা উচিত।
উদাহরণস্বরূপ, আসুন আমরা বলি যে আপনার কিছু ড্রপডাউন নিয়ন্ত্রণ রয়েছে (যা কাস্টম স্টাইলিংয়ের জন্য স্ট্যান্ডার্ড এইচটিএমএল নির্বাচনকে আবৃত করে) যা ক) তালিকা থেকে কিছু মান নির্বাচন করতে পারে এবং খ) খোলা বা বন্ধ করা (অর্থাত্ বিকল্প তালিকা প্রদর্শিত বা লুকানো)। এখন, আসুন আমরা বলি যে আপনার অ্যাপ্লিকেশনটি কোনও ধরণের আইটেমের তালিকা এবং তালিকা প্রবেশের জন্য আপনার ড্রপডাউন নিয়ন্ত্রণ ফিল্টার প্রদর্শন করে filter তারপরে, সক্রিয় ফিল্টার মানটি প্রপ হিসাবে পাস করা এবং খোলা / বন্ধ রাষ্ট্র স্থানীয় রাখা ভাল। এছাড়াও, এটিকে কার্যক্ষম করার জন্য, আপনি প্যারেন্ট উপাদান থেকে একটি onChange হ্যান্ডলারটি প্রেরণ করবেন যা ড্রপডাউন উপাদানটির ভিতরে ডাকা হবে এবং অবিলম্বে স্টোরটিতে আপডেট তথ্য (নতুন নির্বাচিত ফিল্টার) প্রেরণ করবে। অন্যদিকে, খোলা / বদ্ধ অবস্থা ড্রপডাউন উপাদানটির মধ্যে রাখা যেতে পারে, কারণ ব্যবহারকারীর প্রকৃতপক্ষে এটির মান পরিবর্তন না করা অবধি নিয়ন্ত্রণটি খোলা থাকলে কীভাবে বাকি অ্যাপ্লিকেশনগুলি সত্যই তা বিবেচনা করে না।
নিম্নলিখিত কোডটি সম্পূর্ণরূপে কাজ করছে না, এর জন্য সিএসএস এবং হ্যান্ডলিং ড্রপডাউন ক্লিক / ব্লার / ইভেন্টগুলি পরিবর্তন দরকার তবে আমি উদাহরণটি ন্যূনতম রাখতে চাই। আশা করি এটি পার্থক্যটি বুঝতে সহায়তা করে।
const _store = {
items: [
{ id: 1, label: 'One' },
{ id: 2, label: 'Two' },
{ id: 3, label: 'Three', new: true },
{ id: 4, label: 'Four', new: true },
{ id: 5, label: 'Five', important: true },
{ id: 6, label: 'Six' },
{ id: 7, label: 'Seven', important: true },
],
activeFilter: 'important',
possibleFilters: [
{ key: 'all', label: 'All' },
{ key: 'new', label: 'New' },
{ key: 'important', label: 'Important' }
]
}
function getFilteredItems(items, filter) {
switch (filter) {
case 'all':
return items;
case 'new':
return items.filter(function(item) { return Boolean(item.new); });
case 'important':
return items.filter(function(item) { return Boolean(item.important); });
default:
return items;
}
}
const App = React.createClass({
render: function() {
return (
<div>
My list:
<ItemList items={this.props.listItems} />
<div>
<Dropdown
onFilterChange={function(e) {
_store.activeFilter = e.currentTarget.value;
console.log(_store); // in real life, some action would be dispatched here
}}
filterOptions={this.props.filterOptions}
value={this.props.activeFilter}
/>
</div>
</div>
);
}
});
const ItemList = React.createClass({
render: function() {
return (
<div>
{this.props.items.map(function(item) {
return <div key={item.id}>{item.id}: {item.label}</div>;
})}
</div>
);
}
});
const Dropdown = React.createClass({
getInitialState: function() {
return {
isOpen: false
};
},
render: function() {
return (
<div>
<select
className="hidden-select"
onChange={this.props.onFilterChange}
value={this.props.value}>
{this.props.filterOptions.map(function(option) {
return <option value={option.key} key={option.key}>{option.label}</option>
})}
</select>
<div className={'custom-select' + (this.state.isOpen ? ' open' : '')} onClick={this.onClick}>
<div className="selected-value">{this.props.activeFilter}</div>
{this.props.filterOptions.map(function(option) {
return <div data-value={option.key} key={option.key}>{option.label}</div>
})}
</div>
</div>
);
},
onClick: function(e) {
this.setState({
isOpen: !this.state.isOpen
});
}
});
ReactDOM.render(
<App
listItems={getFilteredItems(_store.items, _store.activeFilter)}
filterOptions={_store.possibleFilters}
activeFilter={_store.activeFilter}
/>,
document.getElementById('root')
);
