[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>
)