Reactコンポーネントが提供する要素名を利用者に伝える

<InfoMessage />というコンポーネントがあったとして、そのコンポ―ネントがInformationメッセージだけを返すのか、<p>でくくって返すのか利用者からはわからない。

// InfoMessageコンポーネントがどんな要素を返すかわからないので利用者側でどうマークアップすればよいか迷う
function App() {
  return (
    <Notification>
      <InfoMessage />
    </Notification>
  )
  // or
  return (
    <Notification>
      <p>
        <InfoMessage />
      </p>
    </Notification>
  )
}

ReactElementタイプの第2型引数に要素名を加えることで、利用者に伝えることができる。

function InfoMessage(): ReactElement<Props, 'p'> {
  return <p>xxxxx</p>
}

function App() {
  return (
    <Notification>
      // <p>を返すことがわかる
      <InfoMessage />　
    </Notification>
  )
}