javascript - 仅在Mac以外的设备上添加子菜单项: Electron JS

Question

我想在Electron JS应用程序的"file"菜单项下添加一个“退出”子菜单项，但是仅在Windows和Linux上添加。在Mac上，我已经在“应用程序名称”菜单项下设置了“退出”子菜单项。目前，这是我的代码:

function createMenu(){
    const isMac = process.platform === 'darwin';
    const menu = [
        
        {
            label: "File",
            submenu: [
                {
                    label: 'Add expense',
                },
                !isMac && { 
                    label: 'Quit',
                    click(){
                        app.quit()
                    },
                    accelerator: 'Ctrl+Q'
                }
            ]
        },
        {
            label: "Menu2",
            submenu: [{label: 'Ok'}]
        }
    ];


    // Mac First Item in Template refers to app name (won't be able to override unless you package application)
    isMac && menu.unshift({
        label: app.name,
        submenu: [
            {
                label: 'About',
                click(){
                    open('https://www.google.com') // Using the open package
                }
            }, 
            {
                label: 'Quit',
                click(){
                    app.quit()
                },
                accelerator: 'Cmd+Q'
            }
        ]
    })


    return menu;
    
}

但是，当我运行此命令时，我收到一条错误消息:

TypeError: Invalid template for MenuItem: must have at least one of label, role or type

我应该怎么做呢？
谢谢!

Answer 1

由于尝试将对象有条件地插入列表文字中的方式而导致出现错误。

// The not macOS case:
> [ {"foo": 15}, true && {"bar": 123} ]
[ { foo: 15 }, { bar: 123 } ]

// The macOS case:
> [ {"foo": 15}, false && {"bar": 123} ]
[ { foo: 15 }, false ]

在后一种情况下，最终将 false元素插入数组，这就是为什么会出现错误的原因。
如果要使用这样的速记，则可以使用:

> [ {"foo": 15}, ...(true?[{"bar": 123}]:[]) ]
[ { foo: 15 }, { bar: 123 } ]

> [ {"foo": 15}, ...(false?[{"bar": 123}]:[]) ]
[ { foo: 15 } ]

在您的用例中，这将使您:

const menu = [
    {
        label: "File",
        submenu: [
            {
                label: 'Add expense',
            },
            ...(!isMac)?[{ 
                label: 'Quit',
                click(){
                    app.quit()
                },
                accelerator: 'Ctrl+Q'
            }]:[]
        ]
    },
    {
        label: "Menu2",
        submenu: [{label: 'Ok'}]
    }
];

或者，您可以简单地调整菜单模板:

const menu = [
    {
        label: "File",
        submenu: [
            {
                label: 'Add expense',
            }
        ]
    },
    {
        label: "Menu2",
        submenu: [{label: 'Ok'}]
    }
];

if (!isMac) {
    menu[0]["submenu"].push({ 
        label: 'Quit',
        click(){
            app.quit()
        },
        accelerator: 'Ctrl+Q'
    })
}

使用哪一个取决于您；在第二种情况下，如果结构发生更改，则可能需要更新菜单地址。您还应该权衡可读性。