javascript - Kesalahan: Jangan meneruskan children sebagai props. Sebagai gantinya, letakkan children di antara tag pembuka dan penutup

Saya telah menemukan masalah serupa secara online tetapi solusinya tidak membantu untuk kursus saya. Saya baru dalam typescript dan jadi saya mengira saya mungkin melewatkan sesuatu yang sangat sederhana. Saya memiliki aplikasi sederhana di Nextjs. Aplikasi ini berjalan dengan baik tetapi saya mendapatkan kesalahan ini ketika mencoba membangunnya secara lokal:

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>
      </>
)}

Jawaban #1

Anda tidak dapat melewatkan react node ke konten layout sebagai props. Anda hanya bisa membungkus children di dalam komponen konten layout.

layout_content.tsx

import React from "react";

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

di tata letak utama Anda

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;

Jawaban #2

Ini memberitahu Anda untuk tidak meneruskan properti children ke LayoutContent Anda. Untuk meneruskan children, Anda hanya perlu menempatkan semua yang Anda butuhkan di antara tag pembuka dan penutup dari komponen LayoutContent, seperti ini

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

Atau bahkan lebih tinggi di mana Anda melewatkan anak-anak ke komponen Layout