[React]コンポーネント分割の考え方について

Question

問い合わせフォームの作成を試みております。
以下のように、labelとinput要素の単位でコンポーネント化しようと考えています。

上記イメージ図の単位でコンポーネント化し、label名やプレースホルダーをpropsで渡そうと思います。
懸念事項としましては、氏名の入力欄は姓と名でテキストフィールドを二つ持ちますが、住所などの場合はテキストフィールドが一つになります。
また、項目によってはラベルに必須項目を設けたりします。

これらのテキストフィールドの数や必須ステータスをpropsにbooleanで渡し、その結果によってコンポーネント内の構成を切り替えるという手法を考えているのですが、この実装がコンポーネント分割の考え方として正しいのか分からず迷っています。

氏名の場合はテキストフィールドが二つになるので、nameFlgのようなpropsをtrueで渡し、電話番号の場合はフィールドが三つなのでtellFlgをtrueで渡し、それらの真偽値によってreturnするjsxを切り替えるような感じです。

コンポーネントの汎用性は上がるものの、独立性が下がっていたり、jsxの構成が呼び出し時に依存してしまったり、可読性も下がるように感じたので、ご意見をいただきたいです。

氏名であれば氏名用のコンポーネント、電話番号の場合は電話番号用のコンポーネントを別途作成すべきでしょうか。

よろしくお願いいたします。

Answer 1

質問への回答とはずれますが、flgを種類分用意するのではなくtypeのようなpropを用意してそこに'name'だったり'tell'だったりを渡す形が良いかと思います。
これは質問への回答というより考え方ですね。

Answer 2

ユーザーに入力を求めるフォームの場合に、共通したテキストフィールドを使用する際、コンポーネントを共通化した方が、
何かしらの変更、修正があった場合や、フォームを追加する時などの改修に、あれやこれも…といった個別に直さずに済むので、おすすめです。

Comments

[moragad]

ご回答ありがとうございました。

Answer 3

氏名であれば氏名用のコンポーネント、電話番号の場合は電話番号用のコンポーネントを別途作成すべきでしょうか。

そのとおりだと考えます。電話番号は数字しか入力しませんし、それ以外にも専用のバリデーションを働かせたい場面もあるかと思います。

Comments

[maisumakun]

本質的に入力の個数が違うものを強引に共通化しても、ハンドリングが煩雑になるだけです。

[moragad]

ご回答ありがとうございました。