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)}/>

如果有人复制粘贴这个测试，我使用以下菜单项:

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