<Item item={item} />
#React アンチパターンってほどではないが、なんかマヌケなので避けたいこの #命名 。 基本的に、あまり多くの機能を持たない純粋に item の見た目を提供する系のコンポーネント( props が1個しかない )がこれになりやすい。複雑な役割を持ったやつはもう少し違う名前がつくはず。
というわけで、これの回避の仕方を思いつく限りまとめる。
コンポーネント名を変える
とりあえず 〇〇View か 〇〇Link などに変えてみる
〇〇View はマジで良い名前がないときの最終手段
内容によっては 〇〇Viewer が適切(マンガビューワー、3Dビューワー……)
しかし「ビューワー」というとズームやページ送りみたいな強そうな機能がある印象になる
複数いるなら 〇〇ListItem を後ろにつける
ItemListItem だとちょい変だが、大体のケースで上手くいく
〇〇List が親にいることが前提っぽい命名
一つしかない要素なら The〇〇 をつける
Vue.js は1単語のコンポーネント名を避ける文化があるのでそれが影響してそう
f_subal.icon が、最近はVue.jsでもこれは推奨されなくなったらしい
React だとコンポーネントをシングルトンとみなすことを嫌う文化があるのであまりやらない
props を変える
画像やサムネイルっぽい要素であるなら <Item src={item} /> に変える
<Icon src={icon} /> とかはよく作る
<Item value={item} /> に変える
たとえばフォームっぽい要素……
と思ったけど、フォームっぽい要素が props 1個なわけがないな( onChange があるに決まってる )
<Item {...item} /> にする
これはあんまりよくないと思う(明確さが失われる)
React.VFC<Props> ではなく React.VFC<Item> が来たらレビューで指摘したくなる
明確に書くなら props 分割はあり
<Item title={item.title} description={item.description} />
名前空間をつけて export する
<Tab.Item item={item}> みたいにする
Headless UI とか React Bootstrap がこのパターン
親に <Tab> がいること前提
〇〇ListItem とかと発想は同じ
相対的に間抜けさは減るけど /\bitem\b/gi が 3 回出ることは変わってない
なんかこの設計名前がついてた気がするけど何ていうんだっけ……
コンポーネントにしない
function renderItem(item) にする
<BigComponent>{renderItem(item)}</BigComponent>
クラスコンポーネント時代に this.renderItem() を生やしたクラスをいっぱい見た
別のコンポーネントの render props にする
<BigComponent renderItem={item => ...} />
<BigComponent>{item => ...}</BigComponent>
もちろんこれは render props がぴったりハマるケース以外でやるべきではない
【番外】型名を変える
だいたい <Item item={item} /> しているときは item の型名も Item だったりする(コンポーネント名と型名が被ってる)
これを理由に no-redeclare は切ってしまうことが多い( const 被ったらそもそもコンパイラに怒られるし、いらんやろ )
type Item の方を type ItemEntity などに変えてしっくり来るかを考える
Item はむしろコンポーネント名にこそふさわしい、みたいなケース
<Icon icon={icon} /> なんかは実際そう。props にわたす型を IconConfig などに変えたくなる