판별 가능한 결합 어셈블리를 사용한 Proops 제어

구성 요소의 실현에서'특정한 프로포즈의 값을 보고 다른 프로포즈의 실현을 받아들일지 안 받아들일지'를 제어하려면 판별할 수 있는 유니온형이 편리하다.

판별할 수 있는 연합형

type C = A | B는 A와 B가 공통된 속성을 가진 유형으로, 이 속성의 값을 관찰해 C가 A인지 B인지 판단할 수 있다.
자세한 건 이쪽을 보세요.
https://typescript-jp.gitbook.io/deep-dive/type-system/discriminated-unions

어셈블리의 Proops 제어

예를 들어 type와 같은 Proopstype === 'リンク'를 준비하면 링크를 표시하고 type === 'button'라면 디스플레이 단추와 같은 구성 요소를 실현한다.이 경우 링크는 href가 필요하지만, onClick에서 사용하는 함수는 필요하지 않습니다.반대로, 단추는 href가 필요하지 않지만, onClick에서 사용하는 함수가 필요합니다.

이루어지다

import { VFC } from 'react'

type LinkProps = {
  type: 'link'
  href: string
}

type ButtonProps = {
  type: 'button'
  onClick: () => void
}

type Props = LinkProps | ButtonProps

const LinkOrButton: VFC<Props> = (props) => {
  if (props.type === 'link') {
    return <a href={props.href}>リンク</a>
  } else {
    return <button onClick={props.onClick}>ボタン</button>
  }
}

export default LinkOrButton

어셈블리를 사용하는 경우

<LinkOrButton type="link" href="http://example.com/" />
<LinkOrButton type="button" onClick={() => {alert('hello')}} />

구성 요소에 사용되지 않은 Proops를 제출하지 않고도 판별 가능한 UNION 유형을 사용합니다.