在子中渲染子

Question

我正在尝试解决，这应该是一个相对简单的问题。我正在尝试在下一页中呈现一个组件。我为仪表板下的所有子项定义了一个布局。我不确定是否需要定义另一个布局才能在仪表板的子项中显示。此时该组件出现在之前设置的侧边栏的左侧

app/
├── context/
├── firebase/
├── mobile/
├── portal/
│   ├── components/
│   │   ├── AddGroup.jsx ** THIS COMPONENT **
│   │   └── Sidebar.jsx
│   └── dashboard/
│       ├── groups/
│       │   └── page.jsx ** SHOW COMPONENT HERE **
│       ├── individuals/
│       ├── settings/
│       ├── statistics/
│       ├── layout.jsx
│       └── page.jsx
├── login/
├── utils/
├── dummydata.ts
├── favicon.ico
├── globals.css
├── layout.tsx
└── page.tsx

感谢所有帮助

仪表板布局/布局

import Sidebar from '../components/Sidebar';

const DashboardLayout = ({ children }) => {
    return (
        <div className="min-w-screen min-h-screen bg-gray-200 m-10 flex">
            <div className="w-1/4 p-4">
                <Sidebar/>
            </div>
            <div className='flex-1 flex flex-col'>
                {children}
            </div>
        </div>
    );
};

export default DashboardLayout;

组件：添加组

import React, { useState } from 'react';
import { Dialog, DialogHeader, DialogBody, DialogFooter, Button, Input } from "@material-tailwind/react";

const AddGroup = ({ open, handleOpen }) => {
  return (
    <Dialog open={open} handler={handleOpen}>
      <DialogHeader>Create a Travel Group</DialogHeader>
      <DialogBody>
        <div className="">
          <Input type="text" label="Group Name" />
          <Input type="text" label="Destination" />
          <Input type="date" label="Date" />
          <Input type="number" label="Number of Participants" />
        </div>
      </DialogBody>
      <DialogFooter>
        <Button variant="text" color="red" onClick={handleOpen}>
          Cancel
        </Button>
        <Button variant="gradient" color="green" onClick={() => { /* Add logic to handle form submission */ }}>
          Create
        </Button>
      </DialogFooter>
    </Dialog>
  );
};

export default AddGroup;

显示上述组件的所需位置

'use client'
import React, {useState} from 'react';
import { Button } from "@material-tailwind/react";
import { PlusIcon } from "@heroicons/react/24/solid";
import AddGroup from '../../components/AddGroup'

const Groups = () => {

  const [open, setOpen] = useState(false);

  const handleOpen = () => setOpen(!open);


  return (
    <div className='flex-1 text-gray-800 flex flex-col'>
      <AddGroup open={open} handleOpen={handleOpen} />
      <div className='flex-row flex items-center justify-between'>
        <div className='text-4xl font-medium ml-5 mt-10'>Groups</div>
        <div className='mr-10 mt-10'>
          <Button onClick={(handleOpen)} autoCapitalize='false' size="lg" color="white" className="flex items-center gap-3 font-normal normal-case">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
            <path d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z" />
          </svg>
            Add Group
          </Button>
        </div>
      </div>
      <div className='flex-1 flex justify-center items-center text-gray-500'>
        No groups created
      </div>
      <AddGroup open={open} handleOpen={handleOpen}/>
    </div>
  )
}

export default Groups;

Answer 1

删除重复项并确保样式和类正确

const Groups = () => {
    const [open, setOpen] = useState(false);

    const handleOpen = () => setOpen(!open);

    return (
        <div className="flex-1 text-gray-800 flex flex-col">
            <div className="flex-row flex items-center justify-between">
                <div className="text-4xl font-medium ml-5 mt-10">Groups</div>
                <div className="mr-10 mt-10">
                    <Button
                        onClick={handleOpen}
                        autoCapitalize="false"
                        size="lg"
                        color="white"
                        className="flex items-center gap-3 font-normal normal-case">
                        <PlusIcon className="h-5 w-5" />
                        Add Group
                    </Button>
                </div>
            </div>
            <div className="flex-1 flex justify-center items-center text-gray-500">
                No groups created
            </div>
            <AddGroup open={open} handleOpen={handleOpen} />
        </div>
    );
};

export default Groups;