Reactjs - Material-UI组件在功能中不工作

Question

我试图在一个数组中添加一个材质UI组件，以创建一个可扩展的数组。但是，当我在一个函数中使用这个组件时(newObj，下同）就不能用了。然而，如果我把它放在导出默认函数的return()中 ExpandableTable() 没有问题。

    export default function ExpandableTable() {
            const [tab, setTab] = useState<[] | any>([]);
            const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
            const open = Boolean(anchorEl);

            const handleClick = (event: React.MouseEvent<HTMLElement>) => {
                // console.log(event.currentTarget); give me something but nothing opens
                setAnchorEl(event.currentTarget);
            };

            const handleClose = () => {
                setAnchorEl(null);
            };

            useEffect(() => {addRowTop(tab.length);}, []);

    const addRowBot = (key: any) => {
        const tabIndex = tab.findIndex((i: any) => i.key == key);
        tab.splice(tabIndex + 1, 0, newObj(tab.length));
        setTab([...tab]);
        console.log(tab);
    };
    const addRowTop = (key: number) => {...};
    const deleteRow = (key: any) => {...};

            const newObj = (i: number) => {
                return (
                    <Grid container direction={'row'} justify={'center'}>
                        <SelectNativeTabExtend />
                        <div>
                            {/* This IconButton is display */}
                            <IconButton
                                aria-label="more"
                                aria-controls="long-menu"
                                aria-haspopup="true"
                                onClick={handleClick}
                            >
                                <MoreVertIcon />
                            </IconButton>
                            <Menu
                                id="long-menu"
                                anchorEl={anchorEl}
                                keepMounted
                                open={open}
                                onClose={handleClose}
                                PaperProps={{ style: { maxHeight: ITEM_HEIGHT * 4.5, width: '20ch', }, }}>
                                <MenuItem onClick={() => { addRowTop(i); handleClose() }}>
                                {/* menuItem are not poping */}
                                </MenuItem>
                            </Menu>
                        </div>
                    </Grid>
                )
            }

            return (
                <div style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    {tab}
                    {/* If I put the same code's Menu here, it's working perfeclty */}
                </div>
            );
        }

Answer 1

你应该调用 newObj 在你的回报中，像这样

 return (
                <div style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    {tab}
                    {newObj(<your param>)}
                </div>
            );