👏
[Tips] React
React で詰まりそうなとこや、便利な書き方などを随時追記する。
- 前提
- React: 17~
- Typescript
React.FC<Props>
で配列を渡す
// Propsのプロパティとして定義する
type Props = {
items: Array<string>,
}
// React.FC<Array<string>>は指定できない
export const Hoge: React.FC<Props> = ({ items }) => {
// 省略
}
Array.mapでElement[]をreturnする
- Element の内部で return する
<div>
{array.map((value, index) => ( // map内部で複数Stepの処理を行う場合は {} にして内部でもreturn () する
<div key={index}> /* keyに一意な値を設定する */
{value}
</div>
))}
</div>
- 関数で return する
const Hoge: React.FC<Props> = ({ hoge }) => {
return (
<> /* 無名タグでラップする */
/* ↑と同じ処理のため省略 */
</>
)
}
既存の html タグを拡張した Componentを作成する
- 例)a タグを拡張して、リンクをボタンで表現する AnchorButton コンポーネントを作成する
// Component 固有の Props
type CommonProps = {
size: Size
color: Color
children: React.ReactNode
}
// a タグのref(hrefなど)を props で受け取れるようにする
type Props = ComponentPropsWithoutRef<"a"> & CommonProps
// forwardRef を利用して親から ref を受け取れるようにする
const AnchorButton = React.forwardRef<HTMLAnchorElement, Props>((props, ref) => {
// ボタン表示のstyle設定(省略)
const style = ...
// タグに ref, props を設定する
return (
<a css={style} ref={ref} {...props} >
{props.children}
</a>
)
})
// 親コンポーネント
const Hoge: React.VFC = () => (
<AnchorButton href="/fuga">
Fuga
</AnchorButton>
)
Discussion