コンポーネント分けたい

[RyoUchiyamaGenius]

現状は一番上のボタンからカレンダー全体まで全部calendar.jsにまとめられてる。 button.jsとcalendar.jsに分けたい。

• 現状で考えうる不都合
  • 機能を追加するごとにcalendar.jsが膨らんでいく
  • ボタンを押した時の処理はhandleClickだが、メソッド名が汎用的すぎるので今後部品を増やした時に重複しそう

[sleep0001]

@RyoUchiyamaGenius さん REACTはコンポーネントを配置していく言語って認識だったから分けようと頑張ったんだけど僕には書き方とは構造とかよくわかりませんでした。

[RyoUchiyamaGenius]

@sleep0001 私もちょこっと調べてみましたがわかりませんでした、、、 忘れないようにissue立てたので、もう少し調べてみます。 （どうせ今年しか使わないし汚くてもいいけど）

[RyoUchiyamaGenius]

少なくとも交換ボタンは分けるべき じゃあモード切り替えのswitchも分けるのか？？それやると「交換モード」の文言も分けることになるけど大丈夫そ？？ たぶん大丈夫です

.
└── root/
    ├── カレンダーのページ/
    │   ├── 交換モード系をまとめたコンポーネント/
    │   │   ├── switchコンポーネント
    │   │   └── buttonコンポーネント
    │   └── calendarコンポーネント
    ├── そのほかのページ１
    └── そのほかのページ２

こんな感じなんじゃないですか？知りませんけど

↓あとで調べること

• コンポーネントの呼び方
  • 値の渡し方
  • イベントの発火方法
• ページ遷移やらなんやら

[sleep0001]

ボタンのコンポーネント分けるに対して モードオンオフを保持する方法とリクエスト送信後にオフにする処理を別コンポーネントに反映する方法が分かりません。

[RyoUchiyamaGenius]

モードのオンオフはボタンコンポーネントで管理するので、状態の保持は考えなくて良いです リクエスト送信をボタンコンポーネントで処理するので、送信後も考えなくて良いです そのほか必要な情報は以下のように渡します

// カレンダー(親)からボタン(子)を呼び出すときにデータを渡す
<ButtonComponent
  selectedDate={selectedDate}
  currentMonth={currentMonth} />

// ボタン(子)からカレンダー(親)にデータを渡したいときはイベントとして渡す
dispatchEvent(new CustomEvent("ChangeMode", {
  detail: {... ここにデータを詰める ...}
});

[sleep0001]

それってuseStateも参照できる認識であってますか？

[RyoUchiyamaGenius]

いけるはず calendar.jsのreturnに含まれるので

[sleep0001]

@RyoUchiyamaGenius さん 当件だけのブランチを作成して8/12リリースに間に合えば含めるくらいの認識でいいですか。 一旦機能面を優先したいと思ってます。

[RyoUchiyamaGenius]

もちろん良いです

[RyoUchiyamaGenius]

ついでにリファクタリングもします。 どうせこのissueはコンフリクト大量発生確定演出なので