Reactでコンポーネントの作り方を忘れないために
どうもはなだです。
今回、作りたいものはリンクとボタンを同時に使うことができるExternalLinkを作っていく~!
chakra.UIを使っているのでタグがHTMLと違います!
アロー関数を使用。Next.js使用。TypeScriptで記述。
色んな書き方があってわからないと思いますが、それは使用している環境構築、技術、その時の主流の書き方があるからなのです。
よく、Webサイトでカーソルを乗せると別のページ移動するボタンがありますよね?
もし、HTMLで書くならこんな感じ
<a href="/hogehoge"> <button> ボタンぬ </button> </a>
一応、chakra.UIでも書いてみる。
<Link href={link}> <Button> {children} </Button> </Link>
毎回、毎回タグを2個書いていくのめんどくさい!という時には、Reactではコンポーネントに分けてすることができる!! ファイルを分けて、、
ExternalLink.tsx export const ExternalLink: FC<Props> = ({ children, link }) => { return ( <> <Link href={link}> <Button> {children} </Button> </Link> </> ) }
上のコンポーネントを作っておくことでメインのページで省略して使うことができる!
<ExternalLink link="hogehoge/"> テキスト </ExternalLink>
なにがうれしいのか
- 使いまわしができる。別のページでもボタンを作ろうとしたときに、わざわざCSSを新しく作り、ボタンを作るのは面倒なので、コンポーネントにしてまとめておくと色んなページで再利用できる
- コードを見る側の視認性が上がる。コードが短いので見やすくなります!
まとめ
ほとんどが私の備忘録なのですが、わかっておくと非常に便利なコンポーネントちゃんなのです! ぜひ、皆さんもやってみてください! 初心者なので、間違っていたら教えてください!!!!