Temel olarak, sahne donanımı ve durum, bileşenin neyi ve nasıl oluşturulacağını bilmesi için iki yöntemdir. Uygulama durumunun hangi kısmı eyalete ait ve hangisi üst düzey mağaza için React'in nasıl çalıştığından daha fazla uygulama tasarımınızla ilgilidir. Karar vermenin en basit yolu, IMO, bu belirli veri parçasının bir bütün olarak uygulama için yararlı olup olmadığını veya bazı yerel bilgiler olduğunu düşünmektir. Ayrıca, durumu çoğaltmamak önemlidir, bu nedenle bir parça veri'den aksesuarlar hesaplanabilirse - bu, uygulamalardan hesaplanmalıdır.
Örneğin, a) listeden bir değer seçebilen ve b) açılabilir veya kapatılmış (yani, görüntülenen veya gizlenen seçenekler listesi) gibi bir açılır kontrolünüz (özel HTML için standart HTML seçimini saran) olduğunu varsayalım. Şimdi, uygulamanızın bir tür öğelerin bir listesini ve liste girişleri için açılır kontroller filtrenizi görüntülediğini varsayalım. Ardından, aktif filtre değerini bir prop olarak geçirmek ve açık / kapalı durumunu yerel tutmak en iyisidir. Ayrıca, işlevsel hale getirmek için, açılır bileşenin içinde çağrılacak ve güncellenmiş bilgileri (yeni seçilen filtre) hemen mağazaya gönderecek olan ana bileşenden bir onChange işleyicisi geçirirsiniz. Öte yandan, açık / kapalı durum açılır bileşen içinde tutulabilir, çünkü uygulamanın geri kalanı kontrolün açılıp açılmadığını gerçekten kullanıcı değerini değiştirene kadar umursamaz.
Aşağıdaki kod tamamen çalışmıyor, css ve açılan tıklama / bulanıklık / değişiklik olayları işleme gerekiyor, ancak örnek minimum tutmak istedim. Umarım farkı anlamaya yardımcı olur.
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')
);
