React ChildrenとPropsの違いを確認

目的

PropsとChildrenの違いが曖昧だったので確認

結論

• propsは値を渡すときに利用される
  • 渡し仕方: コンポーネントに value={"value"} のような形で渡す
• childrenは React コンポーネントを渡す時に利用される
  • 渡し仕方: コンポーネントの入れ子構造

検証コード

Parentコンポーネントに Propsと childresを渡してみた

const Parent = ({ title, children }: { title:  string, children: React.ReactNode }) => {
  return (
    <>
      <p>{title}</p>l
      <p>{children}</p>
    </>
  )
}


const Child = () => {
  return (
    <>child</>
  )
}
const App = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<Inputs>(formOptions);

  const handleFormData = (data: FieldValues) => {
    console.log(`FieldValues ${JSON.stringify(data)}`)

  }

  return (
    <>
    <Parent title={'Parent'}>
      <Child />
    </Parent>
  )
}

• 結果