Reactガイドを読んでいくその21

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

React の流儀

昨日の続きです。

Step 4: state をどこに配置するべきなのかを明確にする

stateの最小構成が明確になったところで、stateを変化させるコンポーネントを明確にしていく。

明確にしていくにあたり、確認していくプロセスは以下の様なもの
　・stateを使い表示をする全てのコンポーネント
　・共通の親コンポーネントを見つける
　・stateを持っているべきコンポーネントは共通の親コンポーネントか
　　その階層構造でさらに上位のコンポーネント
　・もしも上に書いてある様なコンポーネントがいなかった場合は
　　自分で作る。

今回作っているアプリにこの条件を照らして考えていくと
　・ProductTableは商品リストをフィルタする必要がある
　・SearchBarは検索文字列とチェック状態を表示する必要がある
　・ProductTableとSeachBarの親コンポーネントはFilterableProductTable
　・FilterableProductTableに各種情報が配置されることは妥当と判断できる

配置先が決まったので、
まずはthis.state = {filterText: '', inStockOnly: false}を追加する。
その次にfilterText と inStockOnly を ProductTable と SearchBarにpropsとして渡す様にする。
その後propsを使ってProductTableのフィルタ処理を行いSearchBarの値を埋める。

class FilterableProductTable extends React.Component {
  // ここに追加
  constructor(props) {
    super(props);
    this.state = {
      filterText: '',
      inStockOnly: false
    };
  }

  render() {
    return (
      <div>
　　// ここに追加
        <SearchBar
          filterText={this.state.filterText}
          inStockOnly={this.state.inStockOnly}
        />
        <ProductTable
           products={this.props.products}
           filterText={this.state.filterText}
           inStockOnly={this.state.inStockOnly}
        />
      </div>
    );
  }
}

今日はここまで。