基本的に、propsとstateは、コンポーネントが何をどのようにレンダリングするかを知るための2つの方法です。アプリケーションの状態のどの部分が状態に属し、どのトップレベルストアに属しているかは、Reactの動作よりもアプリの設計に関連しています。IMOを決定する最も簡単な方法は、この特定のデータが全体としてアプリケーションに役立つのか、それともローカル情報なのかを考えることです。また、状態を複製しないことが重要です。そのため、一部のデータを小道具から計算できる場合は、小道具から計算する必要があります。
たとえば、いくつかのドロップダウンコントロール（カスタムスタイルの標準HTML選択をラップする）があるとします。これは、a）リストから値を選択し、b）開いたり閉じたり（つまり、オプションリストの表示または非表示）できます。ここで、アプリが何らかのアイテムのリストを表示し、ドロップダウンコントロールがリストエントリをフィルター処理するとします。次に、アクティブなフィルター値を小道具として渡し、開いた状態と閉じた状態をローカルに保つのが最善です。また、機能させるには、ドロップダウン要素内で呼び出される親コンポーネントからonChangeハンドラーを渡し、更新された情報（新しく選択されたフィルター）をすぐにストアに送信します。一方、アプリケーションの残りの部分は、ユーザーが実際にコントロールの値を変更するまで、コントロールが開かれているかどうかを気にしないため、開いた状態または閉じた状態をドロップダウンコンポーネント内に保持できます。
次のコードは完全には機能していません。CSSとドロップダウンクリック/ぼかし/変更イベントを処理する必要がありますが、例を最小限に抑えたかったのです。それが違いを理解するのに役立つことを願っています。
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')
);
