reactjs - 向子组件添加道具

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的文档）。您可以传入第二个参数：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 中找到许多这样的示例，例如在 MenuList 中。