javascript - ข้อผิดพลาด: อย่าส่ง children เป็น props แทน ให้วาง children ระหว่างแท็กเปิดและปิด

ฉันพบปัญหาที่คล้ายกันทางออนไลน์ แต่แนวทางแก้ไขไม่ได้ช่วยหลักสูตรของฉัน ฉันเป็นมือใหม่ใน TypeScript ดังนั้นฉันจึงคิดว่าฉันอาจจะพลาดบางสิ่งที่ง่ายมาก ฉันมีแอปง่าย ๆ บน Nextjs มันแสดงผลได้ดี แต่ฉันได้รับข้อผิดพลาดนี้เมื่อพยายามสร้างมันในเครื่อง:

import { useState } from 'react'
import Sidebar from './sidebar';
import LayoutContent from './layout_content';

type Props = {
  children: JSX.Element | JSX.Element[]
}
const Layout = ({ children }: Props) => {
  

  const [open, setOpen] = useState(true);
  const toggle = () => {
    setOpen(!open)
  }
  return (
    <>
      <Sidebar onClick={toggle} sidebar={open} />

      <LayoutContent children={children} sidebar={open}/>
     
    </>
  )
}

export default Layout;

layout_content.tsx

const LayoutContent = ({ children , sidebar}: {children:any, sidebar:any}) => {
      return(
      <>
          <div>
              {children}
          </div>
      </>
)}

คำตอบ #1

คุณไม่สามารถส่ง react node ไปยังเนื้อหาของเลย์เอาต์เป็น props ได้ คุณสามารถห่อ children ภายในคอมโพเนนต์เนื้อหาของเลย์เอาต์เท่านั้น

layout_content.tsx

import React from "react";

const LayoutContent = ({ children , sidebar}: {children:React.ReactNode, sidebar:boolean}) => {
      return(
      <div>
         {children}
      </div>
   )}

ในเลย์เอาต์หลักของคุณ

import React, { useState } from 'react'
import Sidebar from './sidebar';
import LayoutContent from './layout_content';

type Props = {
  children: React.ReactNode
}
const Layout = ({ children }: Props) => {
  

  const [open, setOpen] = useState<boolean>(true);
  const toggle = () => {
    setOpen(!open)
  }
  return (
    <>
      <Sidebar onClick={toggle} sidebar={open} />

      <LayoutContent sidebar={open}>
          {children}
      </LayoutContent>

    </>
  )
}

export default Layout;

คำตอบ #2

มันบอกคุณว่าอย่าส่งพร็อพ children เข้าไปใน LayoutContent ของคุณ หากต้องการส่ง children คุณควรวางสิ่งที่คุณต้องการทั้งหมดระหว่างแท็กเปิดและปิดของคอมโพเนนต์ LayoutContent แบบนี้

<LayoutContent sidebar={open}>
  {children}
</LayoutContent>

หรือแม้แต่สูงกว่าที่คุณส่งเด็กไปยังคอมโพเนนต์ Layout