リンクとしても使えるボタンコンポーネントの作り方(React)

as プロパティに任意の要素を渡すことで、コンポーネントをその要素で描画することができる仕組みを用意しました。仕組みの実態はいい感じの型定義です。 <Button onClick={handleClick}>ボタン</Button> <Button as="a" href="/foo/bar">リンクボタン</Button> Button コンポーネントは普段は button 要素で描画されますが、 as="a" を渡した場合は a 要素で描画されます。また、コンポーネントの props の型定義がその要素に最適化され、 href を渡すことができるようになります。 要素以外にコンポーネントも渡すことができ、 next/link 等の独自の振る舞いが加えられたコンポーネントを使うこともできます。props も next/link に最適化されます。 サンプルプロジェクト as で拡張した様