PrimeReact菜单未编译

Question

我正在尝试让一个PrimeReact弹出菜单在文档后面工作。

我用tsx创建了一个新项目。

我试过了

import 'primereact/resources/themes/saga-blue/theme.css'
import 'primereact/resources/primereact.min.css'
import 'primeicons/primeicons.css'
import {Menu} from "primereact/menu";
import {useRef} from "react";

const Header = () => {
    let menu = useRef(null);
    let items = [
        {icon: 'pi pi-cog', label: 'Configuration'},
        {icon: 'pi pi-info-circle', label: 'About'}
    ];
    return(
        <div className="header">
            <div><i className="pi pi-chevron-left"></i></div>
            <div>Test</div>
            <Menu model={items} popup ref={menu} id="popup_menu" />
            <div><i className="pi pi-ellipsis-v" onClick={(event) => menu.current.toggle(event)} aria-controls="popup_menu" aria-haspopup/></div>
        </div>
    );
}

export default Header

在编译时给了我

Object is possibly 'null'.  TS2531

    19 |             <div>Test</div>
    20 |             <Menu model={items} popup ref={menu} id="popup_menu" />
  > 21 |             <div><i className="pi pi-ellipsis-v" onClick={(event) => menu.current.toggle(event)} aria-controls="popup_menu" aria-haspopup/></div>
       |                                                                      ^
    22 |         </div>
    23 |     );
    24 | }

我错过了什么？

我还尝试用jsx而不是tsx创建一个新项目。

而且起作用了。所以问题来自tsx。

但为什么？以及如何解决这个问题？

我终于找到了解决办法

使用

let menu = useRef`<Menu>`(null);

和

onClick={(event) => menu?.current?.toggle(event)}

Answer 1

我今天有个问题。OP的解决方案让我很困惑。我复制、粘贴了OP发布的内容，即：

let menu = useRef`<Menu>`(null);

但这是行不通的。我不完全确定这是否适用于OP或什么的，但对于我来说，解决方案是使用以下方法：

let menu = useRef<Menu>(null);

我的菜单组件如下所示：

<Menu model={menuItems} popup ref={menu} aria-controls="popup_menu" aria-haspopup />

我显示菜单的按钮是这样的：

<Button icon="pi pi-bars" onClick={(event) => menu.current?.toggle(event)}/>

如果有人正在复制粘贴这个以进行测试，我在menuItems中使用了以下内容：

const menuItems = [
    {label: 'New', icon: 'pi pi-fw pi-plus'},
    {label: 'Delete', icon: 'pi pi-fw pi-trash'}
];