Reactサンプルアプリ開発 プラニングポーカー (15) デッキのタイプを変更 – Contextの利用

Poker サンプル開発

引き続きプラニングポーカーのサンプルアプリの開発。
見積りに使用するデッキはフィボナッチ数で固定であったが、最初に選べるようにしたい。

デッキの選択

トップ画面で選択したデッキを引き渡して使うのだが、Deckコンポーネントは末端に存在するコンポーネントのため、トップレベルのコンポーネントからバケツリレーで渡すのは面倒くさい。

そこでContextを使った実装を試してみた。
まずはコンテキストの定義と作成。

import React, { FunctionComponent } from "react";

interface IAppContext {
  deck: string[];
}

export const AppContext = React.createContext<IAppContext>({ deck: ["0", "1", "2", "3", "4", "5"] });

TSなので、createContextの型引数にIAppContextを明示している。引数には初期値を設定。

アプリケーションでデッキタイプをもとにデッキに並べるポイントの配列を作成する。

declare var deckType: any;
const getDeck = (d: string) => {
  switch (d) {
    case "fib":
      return ["0", "1", "2", "3", "5", "8"];
    case "half":
      return ["0.5", "1", "1.5", "2", "2.5", "3"];
    default:
      return ["0", "1", "2", "3", "4", "5"];
  }
}
const deck = getDeck(String(deckType));

1行目の declare var deckType: any; は、FlaskアプリケーションがレンダリングするHTMLに埋め込まれたグローバル変数の受け取り用。

ReactDOM.render

ReactDOM.render(
  <React.StrictMode>
    <AppContext.Provider value={{ deck: deck }}>
      <TablePage {...tableProps} />
    </AppContext.Provider>
  </React.StrictMode>,
  document.getElementById('app')
);

AppContext.Providerタグで囲ったコンポーネント配下でContextを利用可能となる。

続いてDeckコンポーネント。

export const Deck: FunctionComponent<DeckProps> = (props) => {
  const appContext = useContext(AppContext);

  const handleCardSelect = (point: string) => {
    props.onCardSelected(point);
  }

  const cards = appContext.deck.map((point) => {
    return (
      <div className="deck-card" onClick={() => handleCardSelect(point)} >
        <span className="point">{point}</span>
      </div>
    );
  });
  return (
    <div className="deck">
      {cards}
    </div>
  );
}

useContextAppContextを取得する(1行目)。
deckプロパティにはポイントの配列が入っているので、それを使ってデッキを作成する(8-14行目)。

今回の実装は、以上。

コメント

タイトルとURLをコピーしました