Chapter 12無料公開

asプロパティでいろんなコンポーネントにする例 (ButtonをLink化する)

terrierscript
terrierscript
2021.05.07に更新

あまり頻度は高くありませんが、asというpropsについて抑えておきましょう。
styled-componentsなどであれば度々使われるものなので、馴染みがあるかもしれません。[1]

通常、例えば<Box>なら<div>要素、<Button>なら<button>要素などに割り当てられます。

as propsはこれを別な要素として割り当てるものになります。ハックっぽい感じもあり、それほど積極的に使いたくはありませんが、使ってしまう方が自然になるケースもあります

例えば、よくある例としてボタンをリンク化したいというケースがあるでしょう。

Linkと組み合わせると困る例

例えばLinkと組合わせたい場合、asを避けてしまうとhover時にunderlineが入るなど、意図しない挙動が起きてしまいます

import { Link, Button } from "@chakra-ui/react"

// Linkと組み合わせた場合。 hoverで意図しないunderlineが入ってしまう
<Link href="https://google.com">
  <Button>default button</Button>
</Link>

このようなことを回避するため、素直にas="a"を使ったほうが自然に書けるでしょう。

// asを使った場合
<Button as="a" href="https://google.com">as=a button</Button>

next/linkと組み合わせて困る例

もう一つ、類例としてnext.jsnext/linkと組み合わせる例もよくあります。
この場合、一見挙動としては問題無さそうなのですが、buttonでリンクが再現されるため、中クリックが効かなくなったりSEOに相性の良くないリンクになってしまいます

import NextLink from "next/link"

// 中クリックが効かない・SEOに相性が良くないボタンリンク
<NextLink href="https://google.com" passHref>
  <Button>default button</Button>
</NextLink>

ここも素直にas="a"を使うほうがトータルで驚きが無いでしょう

import NextLink from "next/link"

// 自然な<a>タグによるボタンリンクになる
<NextLink href="https://google.com" passHref>
  <Button as="a">as=a button</Button>
</NextLink>
脚注
  1. styled-componentsなどではかなりエッジケース向けなものでしたが、Chakra UIの方がコンポーネントの強制している範囲が大きいので、利用頻度は多いかもしれません。 ↩︎