मूल रूप से, सहारा और राज्य दो तरीके हैं जो घटक जान सकते हैं कि क्या और कैसे प्रस्तुत करना है। एप्लिकेशन राज्य का कौन सा हिस्सा राज्य से संबंधित है और कौन से शीर्ष स्तर के स्टोर में, आपके ऐप डिज़ाइन से अधिक संबंधित है, रिएक्ट कैसे काम करता है। निर्णय लेने का सबसे सरल तरीका, आईएमओ, यह सोचना है कि क्या यह विशेष डेटा एक पूरे के रूप में आवेदन के लिए उपयोगी है, या यह स्थानीय जानकारी है। इसके अलावा, राज्य को डुप्लिकेट नहीं करना महत्वपूर्ण है, इसलिए यदि डेटा के कुछ टुकड़े को प्रॉम्प्स से गणना की जा सकती है - तो इसे प्रॉम्प्स से गणना की जानी चाहिए।
उदाहरण के लिए, मान लें कि आपके पास कुछ ड्रॉपडाउन नियंत्रण है (जो कस्टम स्टाइल के लिए standart HTML का चयन करता है), जो a) सूची से कुछ मान का चयन कर सकता है, और b) खोला या बंद किया जा सकता है (यानी, विकल्प सूची प्रदर्शित या छिपी हुई है)। अब, मान लें कि आपका ऐप किसी प्रकार की वस्तुओं की सूची प्रदर्शित करता है और सूची प्रविष्टियों के लिए आपका ड्रॉपडाउन नियंत्रण फ़िल्टर करता है। फिर, सक्रिय फिल्टर मान को एक प्रोप के रूप में पास करना सबसे अच्छा होगा, और खुले / बंद राज्य को स्थानीय रखें। इसके अलावा, इसे कार्यात्मक बनाने के लिए, आप मूल घटक से एक ऑनचेंज हैंडलर पास करेंगे, जिसे ड्रॉपडाउन तत्व के अंदर कहा जाएगा और तुरंत स्टोर पर अद्यतन जानकारी (नया चयनित फ़िल्टर) भेजें। दूसरी ओर, खोला / बंद राज्य को ड्रॉपडाउन घटक के अंदर रखा जा सकता है, क्योंकि बाकी एप्लिकेशन वास्तव में परवाह नहीं करता है यदि नियंत्रण खोला जाता है, जब तक कि उपयोगकर्ता वास्तव में इसका मूल्य नहीं बदलता है।
निम्नलिखित कोड पूरी तरह से काम नहीं कर रहा है, इसे सीएसएस और हैंडलिंग ड्रॉपडाउन क्लिक / ब्लर / परिवर्तन घटनाओं की आवश्यकता है, लेकिन मैं उदाहरण को कम से कम रखना चाहता था। आशा है कि यह अंतर को समझने में मदद करता है।
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')
);
