我的子组件未在我的抽屉组件内呈现 – Material UI,React

huangapple go评论87阅读模式
英文:

My childrens components are not rendered inside my Drawer component - Material UI, React

问题

当我调用我的DrawerForm(使用Material UI的抽屉组件)并添加Material UI组件以及项目中存在的其他组件时,为什么它们不会显示在我的DrawerForm中?

我的依赖项:

  • react: 18.2.0
  • react-dom: 18.2.0
  • @amcharts/amcharts5: 5.3.6
  • @mui/icons-material: 5.11.11
  • @mui/material: 5.11.12

调用和渲染组件的index.js

  1. export const CustomMap = () => {
  2. const drawerWidth = "40%";
  3. const [showViewController, setShowViewController] = useState(false);
  4. const handleOpenViewController = () => setShowViewController(true);
  5. const handleCloseViewController = () => setShowViewController(false);
  6. return (
  7. <>
  8. // 更多组件在这里...
  9. <FabForm
  10. position={["absolute"]}
  11. top="16px"
  12. icon="arrowLeft"
  13. handleClick={handleOpenViewController}
  14. />
  15. <DrawerForm
  16. drawerWidth={drawerWidth}
  17. variant="persistent"
  18. open={showViewController}
  19. close={handleCloseViewController}
  20. >
  21. <Box
  22. sx={{
  23. position: "relative",
  24. top: "130px",
  25. }}
  26. >
  27. <DateChart divID="chart1" />
  28. <DateChart divID="chart2" />
  29. <DateChart divID="chart3" />
  30. </Box>
  31. </DrawerForm>
  32. </>
  33. );
  34. }

我的DrawerForm组件:

  1. export const DrawerForm = ({
  2. drawerWidth,
  3. variant,
  4. anchor = "right",
  5. open,
  6. close,
  7. color = "white",
  8. }) => {
  9. return (
  10. <Drawer
  11. sx={{
  12. width: drawerWidth,
  13. flexShrink: 0,
  14. "& .MuiPaper-root": {
  15. width: drawerWidth,
  16. backgroundColor: color,
  17. },
  18. }}
  19. variant={variant}
  20. anchor={anchor}
  21. open={open}
  22. >
  23. <FabForm
  24. top="75px"
  25. icon="arrowRight"
  26. handleClick={close}
  27. />
  28. </Drawer>
  29. );
  30. };
英文:

Why when I invoke my DrawerForm(Drawer Material UI) component and add Material UI components as well as other components that exist in the project are not displayed in my DrawerForm?

My dependencies:

  • react: 18.2.0
  • react-dom: 18.2.0
  • @amcharts/amcharts5: 5.3.6
  • @mui/icons-material: 5.11.11
  • @mui/material: 5.11.12

My index.js that invoke and render the components:

  1. export const CustomMap = () =&gt; {
  2. const drawerWidth = &quot;40%&quot;;
  3. const [showViewController, setShowViewController] = useState(false);
  4. const handleOpenViewController = () =&gt; setShowViewController(true)
  5. const handleCloseViewController = () =&gt; setShowViewController(false)
  6. return (
  7. &lt;&gt;
  8. // More components here...
  9. &lt;FabForm
  10. position={[&quot;absolute&quot;]}
  11. top=&quot;16px&quot;
  12. icon=&quot;arrowLeft&quot;
  13. handleClick={handleOpenViewController}
  14. /&gt;
  15. &lt;DrawerForm
  16. drawerWidth={drawerWidth}
  17. variant={&quot;persistent&quot;}
  18. open={showViewController}
  19. close={handleCloseViewController}
  20. &gt;
  21. &lt;Box
  22. sx={{
  23. position: &quot;relative&quot;,
  24. top: &quot;130px&quot;,
  25. }}
  26. &gt;
  27. &lt;DateChart divID=&quot;chart1&quot; /&gt;
  28. &lt;DateChart divID=&quot;chart2&quot; /&gt;
  29. &lt;DateChart divID=&quot;chart3&quot; /&gt;
  30. &lt;/Box&gt;
  31. &lt;/DrawerForm&gt;
  32. &lt;/&gt;
  33. )
  34. }

My DrawerForm component:

  1. export const DrawerForm = ({
  2. drawerWidth,
  3. variant,
  4. anchor = &quot;right&quot;,
  5. open,
  6. close,
  7. color = &quot;white&quot;,
  8. }) =&gt; {
  9. return (
  10. &lt;Drawer
  11. sx={{
  12. width: drawerWidth,
  13. flexShrink: 0,
  14. &quot;&amp; .MuiPaper-root&quot;: {
  15. width: drawerWidth,
  16. backgroundColor: color,
  17. },
  18. }}
  19. variant={variant}
  20. anchor={anchor}
  21. open={open}
  22. &gt;
  23. &lt;FabForm
  24. top=&quot;75px&quot;
  25. icon=&quot;arrowRight&quot;
  26. handleClick={close}
  27. /&gt;
  28. &lt;/Drawer&gt;
  29. );
  30. };

答案1

得分: 0

You need to pass the children prop. You should study how to handle props better. Here's the documentation on how to handle children: https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children.

What you're looking for is probably one of these:

  1. export const DrawerForm = ({
  2. drawerWidth,
  3. variant,
  4. anchor = "right",
  5. open,
  6. close,
  7. color = "white",
  8. children // this prop
  9. }) => {
  10. return (
  11. <Drawer
  12. sx={{
  13. width: drawerWidth,
  14. flexShrink: 0,
  15. "& .MuiPaper-root": {
  16. width: drawerWidth,
  17. backgroundColor: color,
  18. },
  19. }}
  20. variant={variant}
  21. anchor={anchor}
  22. open={open}
  23. >
  24. <FabForm
  25. top="75px"
  26. icon="arrowRight"
  27. handleClick={close}
  28. >
  29. {children} {/* <- add children either here */}
  30. </FabForm>
  31. {children} {/* <- or here */}
  32. </Drawer>
  33. );
  34. };

I'm not sure if you want it to be inside FabForm or inside Drawer. That's why I answered with both.

英文:

You need to pass the children prop. You should study how to handle props better. Here's the documentation on how to handle children: https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children.

What you're looking for is probably one of these:

  1. export const DrawerForm = ({
  2. drawerWidth,
  3. variant,
  4. anchor = &quot;right&quot;,
  5. open,
  6. close,
  7. color = &quot;white&quot;,
  8. children // this prop
  9. }) =&gt; {
  10. return (
  11. &lt;Drawer
  12. sx={{
  13. width: drawerWidth,
  14. flexShrink: 0,
  15. &quot;&amp; .MuiPaper-root&quot;: {
  16. width: drawerWidth,
  17. backgroundColor: color,
  18. },
  19. }}
  20. variant={variant}
  21. anchor={anchor}
  22. open={open}
  23. &gt;
  24. &lt;FabForm
  25. top=&quot;75px&quot;
  26. icon=&quot;arrowRight&quot;
  27. handleClick={close}
  28. &gt;
  29. {children} {/* &lt;- add children either here */}
  30. &lt;/FabForm&gt;
  31. {children} {/* &lt;- or here */}
  32. &lt;/Drawer&gt;
  33. );
  34. };

I'm not sure if you want it to be inside FabForm or inside Drawer. That's why I answered with both.

huangapple
  • 本文由 发表于 2023年3月31日 23:30:29
  • 转载请务必保留本文链接:https://go.coder-hub.com/75900270.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定