見た目が同じだが意味合いが異なるComponentを作る
例えばこんな感じのAddButtonを作りたいとする
https://gyazo.com/cc0e2ddb9393b8babd1795105eb17be6
1つの見た目でも複数の意味合いを持つ
buttonとして機能する場合
e.g. buttonを押すとfieldを増やしていく
anchorとして機能する場合
e.g. Scrapboxのように新規ノートのページに遷移する
こういうComponentをどう定義するか？
いくつかの実装方法が考えられる
<button>を使い、onClickpropertyをもたせる
これが最も安易に思いつく案だと思うmrsekut.icon
<button>とonClickにすれば、両方の目的を達成できる
<button>で定義すると「新しいタブで開く」のようなメニューが表示されない
Componentを別個に定義する
<a>のものと、<button>のものを分けて定義するということも考えられる
しかし、見た目は全く同一のものである
style的なメンテが面倒になる
<div>で共通の見た目を作って、
<a>で囲んだものと、
<button>で囲んだものと
に分けて提供する、というのも考えられる
Interfaceを良い感じにすれば、利用者もそこまで迷わないか