Question

I m New to NextJS and response and I m seeking to knowledge composition.

I have a client component called Form.jsx like

export default function FormHome() {
   ... tons of client side javascript function ...
   const [open, setOpen] = React.useState(false);
   
function onSubmit(data: z.infer<typeof FormSchema>) {
    startTransition(async () => {
      ... other code ...

        setOpen(true);
      });
    });
  }


   if(isDesktop) {
      return (
      <Form {...form}>
        ... a very long block of javascript that interacts with the function above...
        <Dialog open={open} onOpenChange={setOpen}>
        ... some other code ...
        </Dialog>
      </Form>
      );
   }
   
      return (
      <Form {...form}>
        ... a very long block of javascript that interacts with the function above...
        <Drawer open={open} onOpenChange={setOpen}>
        ... some other code ...
        </Drawer>
        <AlertDialog open={openAlert} onOpenChange={setOpenAlert}>
        </AlertDialog>
      </Form>
      );
}

之后,我有<代码>网页.tsx。公正

export default function Home() {
  return <Form />;
}

在同一<代码>Form.jsx的客户部分中,有某种方式可以确定以下各项:<Drawer>,<Dialog>,等等,但通过这些变量(例如,我需要通过{>><>>>>>>>>>>>和Open})。

Answer 1

If I understand correctly, what you want to do is to extract some of your JSX code into a separate component. It could be done like this:

// name this component whatever you want
function DrawerWrapper(props) {
  return (
    <Drawer open={props.open} onOpenChange={props.onOpenChange}>
        ... some other code ...
    </Drawer>
  );
}

export default function FormHome() {
  const [open, setOpen] = React.useState(false);

  return (
     <Form {...form}>
        <DrawerWrapper open={open} onOpenChange={setOpen} />
     </Form>
  );
}

不过,如果你的习俗部分有许多法典,我建议为它建立一个单独的档案,然后进口。

友情链接