我的子组件不是在我的抽屉组件中渲染的- Material UI, React

Question

为什么当我调用我的DrawerForm(抽屉材料UI)组件和添加材料UI组件以及存在于项目中的其他组件不显示在我的DrawerForm?

我的依赖关系:

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

调用和呈现组件的index.js:

export const CustomMap = () => {
const drawerWidth = "40%";
const [showViewController, setShowViewController] = useState(false);
const handleOpenViewController = () => setShowViewController(true)
const handleCloseViewController = () => setShowViewController(false)
return (
<>
// More components here...
<FabForm
position={["absolute"]}
top="16px"
icon="arrowLeft"
handleClick={handleOpenViewController}
/>
<DrawerForm
drawerWidth={drawerWidth}
variant={"persistent"}
open={showViewController}
close={handleCloseViewController}
>
<Box
sx={{
position: "relative",
top: "130px",
}}
>
<DateChart divID="chart1" />
<DateChart divID="chart2" />
<DateChart divID="chart3" />
</Box>
</DrawerForm>
</>
)
}

我的drawform组件:

export const DrawerForm = ({
drawerWidth,
variant,
anchor = "right",
open,
close,
color = "white",
}) => {
return (
<Drawer
sx={{
width: drawerWidth,
flexShrink: 0,
"& .MuiPaper-root": {
width: drawerWidth,
backgroundColor: color,
},
}}
variant={variant}
anchor={anchor}
open={open}
>
<FabForm
top="75px"
icon="arrowRight"
handleClick={close}
/>
</Drawer>
);
};

Answer 1

您需要通过childrenprop。你应该学习如何更好地使用道具。以下是如何处理儿童的文档:https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children.

你要找的可能是这些:

export const DrawerForm = ({
drawerWidth,
variant,
anchor = "right",
open,
close,
color = "white",
children // this prop
}) => {
return (
<Drawer
sx={{
width: drawerWidth,
flexShrink: 0,
"& .MuiPaper-root": {
width: drawerWidth,
backgroundColor: color,
},
}}
variant={variant}
anchor={anchor}
open={open}
>
<FabForm
top="75px"
icon="arrowRight"
handleClick={close}    
>
{children} {/* <- add children either here */}
</FabForm>
{children} {/* <- or here */}
</Drawer>
);
};

我不确定你是否想要它是在FabForm内或在抽屉内。这就是为什么我两个都回答。