この記事を作った動機

　Vite + React + TypeScript の環境でコンポーネント"内部"になにか要素をネストする方法がわかんなかったので記録するだけ。ただ厳密のこのやり方で正しいかはわかっていないが、ChatGPT-5 が出したやり方がとりあえず動いたので記録することにした。今のところ公式ドキュメントとかで今回出すようなやりかたをしているのはまだ見つけられていない。

環境

  • Vite
  • React
  • TypeScript
  • Tailwind CSS
  • zustand

ネストの仕方

  • ネストできる関数コンポーネントを単体で定義
import {type ReactNode} from "react"

export default function Outside1({ children }:{ children:ReactNode }){
    return <div className="flex flex-row bg-gray-700 h-[5rem] w-screen top-[5rem] left-0 fixed">
    {children}
    </div>
}
  • ネストできる関数コンポーネントをコンポーネント内に定義
import {type ReactNode} from "react"

export default function Acompornent(){
    // ネストができる関数コンポーネントは必ずしも、このようにコンポーネント内に書いている必要はないと思う。
    function Outside({ children }:{ children:ReactNode }){
        return <div className="flex flex-row bg-gray-700 h-[5rem] w-screen top-0 left-0 fixed">
        {children}
        </div>
    }

    return <div>
        <Outside>
            <p>This</p>
            <p>is</p>
            <p>children.</p>
        </Outside>
        <Outside1>
            <p>This</p>
            <p>is</p>
            <p>children.</p>
        </Outside1>
    </div>

}

参考にしたサイトとか