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

React

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

ポイント

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

コードで見る

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

// children.tsx
import React from 'react'

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

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

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

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

// parent.tsx
import React from 'react'

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

タイトルとURLをコピーしました