Question

也许是一个愚蠢的问题，但是如何为孩子组件添加道具呢？

即，我创建了此组件：

import React, { useState } from "react";
import { Menu, MenuItem } from "@material-ui/core";

export default function DashboardMenu({ children }) {
    const [open, setOpen] = useState(false);
    const [anchorEl, setAnchoEl] = useState(null);
    const handleClick = event => {
        setAnchoEl(event.currentTarget);
        setOpen(!open);
    };

    const handleClose = () => {
        setOpen(false);
    };

    return (
        <>
            {children}
            <Menu
                id="configMenu"
                keepMounted
                anchorEl={anchorEl}
                open={open}
                onClose={() => handleClose()}
            >
                <MenuItem onClick={handleClose}>Profile</MenuItem>
                <MenuItem onClick={handleClose}>My account</MenuItem>
                <MenuItem onClick={handleClose}>Logout</MenuItem>
            </Menu>
        </>
    );
}

我可以这样称呼它：

<DashboardMenu>
  <Avatar
    style={{
      backgroundColor:
         theme.palette.secondary.main
    }}
  >
     {avatarId}
  </Avatar>
</DashboardMenu>

该组件将使用<Avatar>个道具渲染style组件。

我的问题是，在DashboardMenu组件内部，如何向孩子们添加另外一个道具，例如{children onClick={handleClick}}？

Answer 1

您可以使用React.cloneElement（文档here）。您可以在第二个参数中传递props：

//...
return (
        <>
           {React.cloneElement(children, {/* props you want to add here*/})}}
            <Menu
                id="configMenu"
                keepMounted
                anchorEl={anchorEl}
                open={open}
                onClose={() => handleClose()}
            >
                <MenuItem onClick={handleClose}>Profile</MenuItem>
                <MenuItem onClick={handleClose}>My account</MenuItem>
                <MenuItem onClick={handleClose}>Logout</MenuItem>
            </Menu>
        </>
    );

您可以在Material-UI中找到许多示例，例如here in MenuList。

向儿童组件添加道具

1 个答案: