例えばこんな感じの AddButton を作りたいとする

1つの見た目でも複数の意味合いを持つ

buttonとして機能する場合

e.g. buttonを押すとfieldを増やしていく

anchorとして機能する場合

e.g. Scrapboxのように新規ノートのページに遷移する

こういうComponentをどう定義するか？

いくつかの実装方法が考えられる

<button> を使い、 onClick propertyをもたせる

これが最も安易に思いつく案だと思う

<button> と onClick にすれば、両方の目的を達成できる

ページ遷移する場合も、プログラムで画面遷移すれば良い

しかし、問題は画面遷移処理は<a>の責務を満たすようにする必要があるということ

<button> で定義すると「新しいタブで開く」のようなメニューが表示されない

Polymorphic React Componentsにする

Componentを別個に定義する

<a> のものと、 <button> のものを分けて定義するということも考えられる

しかし、見た目は全く同一のものである

style的なメンテが面倒になる

<div> で共通の見た目を作って、

<a> で囲んだものと、

<button> で囲んだものと

に分けて提供する、というのも考えられる

Interfaceを良い感じにすれば、利用者もそこまで迷わないか