😊

実務で学んだReactのデザインパターンやTips集

1 min read

はじめに

この記事では、ボク自身が開発しているプロジェクトで学んだ Reactのデザインパターン, Tipsの備忘録として、残させていただきます。

props

  1. props の初期値に値を指定する
    関数の引数に初期値を定義することができます。
type Props = {
  color: string,
  text: string
}

const Button: React.VFC<Props> = ({ color = "red", text = 'text something here' }) => {
  return (
    <button style={color}>
        {text}
    </button>
  )
}

2.レスト構文
複数の props をひとまとまりにし、オブジェクトにします。
関数の引数や分割代入での多数の値を配列として受け取る場合に使用しますね。

type ButtonProps = React.HTMLAttributes<HTMLButtonElement>

type Props = {
    color: string
} & ButtonProps;

const Button: React.FC<Props> = ({ color = "red", ...buttonProps }) => {
    return <button style={{ color }} {...buttonProps}>{children}</button>
}
  1. props getters
    React Hooks以前に普及された Render Props と似ています。
    propsのオブジェクトを定義、一度だけ渡すというのもです。エンドユーザーは、ほしいprops やそうでないprops、追加したいprops を選択できるのはメリットかもしれないですね。
import { useState } from "react";
function useButton () {
    const [isOepn, setisOpen] = useState(false)
    const toggle = () => setisOpen(!isOepn)

    const getTogglerProps = ({ onClick, ...otherProps } = {}) => ({
        'aria-expanded': isOpen,
        onClick: () => {
            onClick && onClick(isOpen)
            toggle(isOepn)
        },
        ...otherProps,
    })

    return {
        isOepn,
        getTogglerProps,
    };
}
import { useButton} from "./useButton";

function Usage() {
  const {isOpen, getTogglerProps} = useButton();

  return (
    <>
      <button {...getTogglerProps()}>
          {isOpen ? "OPEN" : "CLOSE"}
      </button>
      <button {...getTogglerProps({ disabled: true })}>
      </button>
    </>
  );
}

export { Usage };

さいごに

まだまだ学んだ事があるので、まとめていきたいなと思ってます。
少しでも役に立てたら嬉しいです。

GitHubで編集を提案

Discussion

ログインするとコメントできます