【React×TypeScript】コンポーネントをPropsとして渡す方法

コンポーネントをPropsとして渡す方法に少し手こずったので、メモしておきます。

ポイント
コードで見る

ポイント

指定するPropsの型は、JSX.ElementやReact.ReactNodeなどを使用する
コンポーネントを受け取る際は、引数にpropsを受け取り、propsからコンポーネントを取り出す。
※関数コンポーネントを作る際、引数にpropsを({child1, child2})などと記述することが多いが、(props)とする必要がある（多分レンダリングの関係でそうなってる）。

コードで見る

Childrenというコンポーネントがchild1とchild2というprops名でコンポーネントを受け取ると仮定。

import React from 'react'

type Props = {
  child1: JSX.Element // ポイント１(React.ReactNode などでもOK）
  child2: JSX.Element
}

export default Children: React.FC<Props> = (props) => {
  const { child1, child2 } = props // ポイント２（({child1, child2})と書かずにpropsとする）

  return (
    <div>
      {child1}
      <div>{child2}</div>
    </div>
  )
}

そのChildrenコンポーネントを使用する時は通常通り各propsを指定する。

import React from 'react'

export default Parent: React.FC = () => {
  return (
    <Children
      child1 = {<div>child1</div>}
      child2 = {<div>child2</div>}
    />
  )
}