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

Question

我正在尝试将材质 UI 组件添加到数组以创建可扩展数组。但是，当我在函数中使用这个组件时（newObj，下面）它不起作用。但是，如果我把它放在导出默认函数ExpandableTable()的return()中就没有问题了。

    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>
            );